怎么还原过大的psd图

按照psd作图的时候有个不解的地方,就是按照psd的尺寸,,导航栏的宽度是1700px,但是我写出来的页面,如果按照这个宽度就会出现滚动条。

而且他的父元素我没有设置宽度,最后就导致父元素的宽度短,包裹不了里面的导航栏,除非这时候缩放浏览器的窗口才能正确显示布局,这个该怎么解决。

这是html结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="public-header clearfix">
        <div class="header-contain">
            <div class="header-logo"></div>
            <nav class="item">
                <a href="">首页</a>
                <a href="">一站式服务</a>
                <a href="">行业动态</a>
                <a href="">案例展示</a>
                <a href="">网络营销</a>
                <a href="">联系我们</a>
            </nav>
        </div>
    </div>
    <div class="index-banner_0">
        <div class="public-contain">
    </div>
    <div class="index-banner_1">
        <div class="public-contain"></div>
    </div>
    <div class="public-contain index-banner_2"></div>
    <div class="index-banner_3">
        <div class="public-contain"></div>
    </div>
    <div class="index-banner_4">
        <div class="public-contain"></div>
    </div>
    <div class="public-footer">
        <div class="public-contain"></div>
    </div>
</body>
</html>

这是写的样式:

.public-header{
    height: 63px;
    width: max-width;
    background-color: #000; 
}
.public-header .header-logo{
    background-image: url(../img/logo.png);
    width: 467px;
    height: 46px;
    float: left;
}
.public-header .item{
    float: right;
    color: #000;
}
.header-contain{
    width: 1700px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.public-contain{
    width: 1112px;
    margin: 0 auto;
    position: relative;
    background-color: blue;
}
.public-footer{
    height: 752px;
    background-color: red;
}

比如看这张:

clipboard.png

这是我浏览器100%的时候显示的画面

clipboard.png

这是我浏览器90%显示的画面。

比较之后明显可以看出后者的更好,这是什么原因造成的呢

阅读 2.9k
2 个回答

psd宽度1700两边有空余宽度,按照中间内容宽度写就行

图片描述

按照1L说的,你看这张图,宽度很宽,但是整个页面实际上内容的宽度只有红框的宽度,两边都是留白的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏