1.header和footer的宽度右边有缺少（没有100%）。2.网页主体部分的3个图片有空隙。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    /*此处写代码*/
    *{
        margin:0px;
        padding:0px;
        text-align:center;
        color:white;
        font-family:"微软雅黑";
        font-size:20px;
    }
    .header{
        width:100%;
        min-width:1300px;
        height:160px;
        background:black;
        position:fixed;
        top:0;
    }
    .header .logo{
        position:absolute;
        top:26px;
        left:0;
        cursor:pointer;
    }
    .header .nav{
        position:absolute;
        top:0;
        right:0;
        cursor:pointer;
    }
    .header .nav ul li{
        list-style-type:none;
        display:inline-block;
        line-height:160px;
        margin:0 40px;
    }
    .container{
        width:100%;
        min-width:1300px;
        display:block;
        padding-top:160px;
        padding-bottom:100px;
    }
    .footer{
        width:100%;
        min-width:1300px;
        height:100px;
        background:black;
        position:fixed;
        bottom:0;
    }
    .footer ul li{
        display:inline-block;
        list-style-type:none;
        line-height:100px;
        margin:0 40px;
        cursor:pointer;
    }
</style>
</head>
<body>

<div class="header">
      <div class="logo">
          <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/>
      </div>
      <div class="nav">
          <ul>
              <li>课程</li>
              <li>职业路径</li>
              <li>实战</li>
              <li>猿问</li>
              <li>手记</li>
          </ul>
      </div>
</div>
<div class="container">
        <img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg"/>
        <img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg"/>
        <img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg"/>
</div>
<div class="footer">
      <ul>
          <li>网站首页</li>
          <li>企业合作</li>
          <li>人才招聘</li>
          <li>联系我们</li>
          <li>常见问题</li>
          <li>友情链接</li>
      </ul>
</div>
</body>
</html>

Annisa 2018-05-28

源自：CSS网页布局基础 2-7 编程练习

收起

2回答

妮可妮可妮_ 2018-05-28 18:07:57

这种方法也可以实现没有横向滚动条哦,代码不是唯一的,可以从项目的需求角度考虑具体是用什么方法.

头部和顶部宽度的确为100%显示的,但是图片超出了页面实际的宽度,使页面出现了横向滚动条,当给三个图片设置宽度为100%显示的时候,就没有出现空白区域的问题了.

同学快试一试能不能解决你的疑惑呢?

收起回答

提问者 Annisa #1

原来是这样，我原本以为把包含图片的容器的宽度设置为100%就可以了。现在已经没有问题了，非常感谢！

2018-05-28 18:29:58

妮可妮可妮_ 2018-05-28 16:27:10

同学的第一个问题不是很明白,可以再详细的说一下疑惑的地方.

下面是你代码中出现的问题,可以参考一下:

页面出现横向滚动条.建议在整体内容处设置overflow:hidden,或者使用其他方式.
图像属于行内替换元素,在div样式上写上font-size: 0;或者在img样式上写上display: block;空隙就不会有了

收起回答

提问者 Annisa #1

第2个问题已经解决~但是你给的建议的第一条overflow:hidden会导致我的网页信息没有办法全部浏览，不知道是否给网页所有的内容的宽度设为固定值就不会有横向滚动条了呢？第1个问题我再说明下：在把头部和顶部的fixed属性注释后，头部和顶部往右边拉，会出现白色区域，也就是头部和顶部的背景色没有完全铺满网页的100%，也可能是这个问题导致在加了fixed属性后，头部往右拉会有“手记”的信息没有显示，底部也是同样的问题。

2018-05-28 17:05:59