麻烦帮我看一下哪里不对

100

101

102

103

104

105

106

107

108

109

110

111

112

CTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
 
        .a{
            width:1600px;
            top: 0;
            left: 50%;
            margin-left: -800px;
            height: 100px;
            background-color: black;
            font-size: 26px;
            font-weight: bold;
            
            position: fixed;
          }  
          .z{
            background: url(http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png) no-repeat left center;
            width: 380px;
            height: 100px;
            float: left;
          }
          .y{
            height: 100px;
            padding: 0 40px;
            line-height: 100px;
            float: right;
            color:white;
          }
          .b{
        
            margin-top: 100px;
            height: 480px;
            background: url(http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg) no-repeat center;
          }
          .c{
           
            height: 480px;
            background: url(http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg) no-repeat center;
          }
          .d{
       
            margin-bottom: 100px;
            height:480px;
            background: url(http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg) no-repeat center;
          }
         .one{
            width: 1600px;
            height: 100px;
            line-height: 100px;
            background-color: black;
            position: fixed;
            text-align: center;
            bottom: 0;
            left:50%;
            margin-left: -800px;
 
             
             
 
 
 
         }
         .x{
            
            font-size: 16px;
            color: white;
            font-weight: bold;
             
            padding: 0 60px;
            display: inline;
 
 
         }
         
 
 
             
 
           
 
 
    </style>
</head>
<body>
    <div class="a">
        <div class="z"></div>
        <div class="y">课程</div>
        <div class="y">职业路径</div>
        <div class="y">实战</div>
        <div class="y">猿问</div>
        <div class="y">手记</div>
    </div>
    <div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
    </div>
    <ul class="one">
        <li class="x">网站首页</li>
        <li class="x">企业合作</li>
        <li class="x">人才招聘</li>
        <li class="x">联系我们</li>
        <li class="x">常见问题</li>
        <li class="x">友情链接</li>
    </ul>
</body>
</html>

这是代码，搞了一个晚上，完全是一边做一遍去翻以前的资料的，困扰自己最久的就是页脚的内容，一开始想着用浮动，后来发现浮动不能实现居中效果，接着想着用定位，但是发现缺少了浮动的效果以后，不能实现内容在同一行了，最后才想起来display这个属性，之前学习的内容在脑子里都打结了

JIANGYUHANG 2018-05-16

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

收起

3回答

好帮手慕星星 2018-05-17 13:59:40

1、如果是你用img标签插入图片，设置图片的宽度为100%，在水平方向上是可以全屏显示的。背景图片的话，需要设置背景盒子的宽度为100%，高度自己设置固定像素，background-size:100%;就可以了。

2、如果使用img标签插入图片，图片本身是内联块状元素（inline-block），默认之间存在缝隙，可以将图片设置成block。背景图片的话，不会存在缝隙的。

3、没有出现白色缝隙啊，可以截一下图吗？

收起回答

好帮手慕星星 2018-05-17 10:15:41

经测试显示如下：

没有全屏显示哦，可能你自己测试的时候是全屏显示的，但是由于显示器分辨率的不同，显示效果也会不同，所以建议设置宽度为100%。

footer的修改方式是一样的。

背景图片设置宽度为100%：

自己修改下。

在学习的过程中，要注意及时复习，及时回看自己总结或者是不太牢固的知识点，时常可以做一些小练习和查看我们的教辅资料，不要着急，如果忘记了，可以把视频多看几遍，重复的看，总会记住的，变成自己的。要相信自己，加油加油~~

收起回答

提问者 JIANGYUHANG #1

想问一下，对于图片的设置，我把页头页脚都设置成100%宽度，效果能显示成百分百，但是图片设置成百分百的时候，显示效果却不是百分百的，这是什么原因呢，自己如何解决呢？还有个问题就是图片的高度设置，如果让两张图片无缝连接在一起，且不会有重合的部分？最后一个问题，我的页头宽度设置100px，然后我的第一张图片设置margin-top100，图片与页头有白色缝隙是什么原因呐

2018-05-17 11:52:39
提问者 JIANGYUHANG #2

最后个问题是页头的高度设置成100px，不是宽度打错了

2018-05-17 11:53:37