老师帮我检查下代码,感觉好多错误的地方,内容之间图片有黑色缝隙、以及头部导航栏居中问题,请老师解答下

老师帮我检查下代码,感觉好多错误的地方,内容之间图片有黑色缝隙、以及头部导航栏居中问题,请老师解答下

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    body{margin:0;padding:0;width:100%;height:auto;font-family:微软雅黑;font-size:20px;text-align:center;background:black;}

    .header{

        width:100%;height:100px;background:black;position:fixed;top:0px;

    }

    .header div{float:left;

    }

    .header div img{display:block;}

    .nav{

        float:right;

        height:100px;

        margin:0;

    }

    .header .nav li{

        list-style:none;

        margin-right:50px;

        color:white;

        float:left;

        line-height:100px;

        

    }

    .bodyer{

        width:100%;height:600px;

    }

    .bodyer div img{margin:0;padding:0;}

    .footer{

        width:100%;height:100px;background:black;position:fixed;bottom:0px;text-align:center;

    }

    p{

        height:100px;

        word-spacing:100px;

        margin:0;

        line-height:100px;

    }

    a{

        color:white;

    }

    /*此处写代码*/

  </style>

</head>

<body>

    <div class="header">

        <div><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></div>

        <ul class="nav">

            <li>课程</li>

            <li>职业路径</li>

            <li>实战</li>

            <li>猿问</li>

            <li>手记</li>

        </ul>

    </div>

    <div class="bodyer">

        <div><img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg"/></div>

        <div><img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg"/></div>

        <div><img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg"/></div>

    </div>

    <div class="footer">

        <p>

            <a>页脚</a>

            <a>页脚</a>

            <a>页脚</a>

            <a>页脚</a>

            <a>页脚</a>

            <a>页脚</a>

        </p>

    </div>

  <!-- 此处写代码 -->

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕粉 2020-03-14 17:12:46

同学你好,不是的,老师在第一次回答的时候就跟同学讲了哦:

http://img1.sycdn.imooc.com//climg/5e6c9fb709e0770a06880067.jpg

同学可以再看下第一次回答。

祝学习愉快~

好帮手慕粉 2020-03-14 10:24:15

同学你好,老师这边使用margin是不会有覆盖的呢,同学用padding也是一样的道理,只要能够正确实现效果就可以呢。

祝学习愉快~

  • 提问者 qq_慕容254374 #1
    老师,图片被遮盖一部分是不是因为头部里面元素设置了浮动使元素脱离了文档流,如果是的话给头部父元素设置清除浮动是不是也可以实现图片不背遮盖呢
    2020-03-14 15:10:59
好帮手慕粉 2020-03-12 11:07:27

同学你好,关于同学的问题回答如下:

1、图片之间有黑色间隙是因为图片是内联元素,底部自带默认间隙,可以设置为块级元素清除:

http://img1.sycdn.imooc.com//climg/5e69a68f091915c204760155.jpg

2、主体部分的第一张图片和最后一张图片被网页头部和底部盖住了一部分:

http://img1.sycdn.imooc.com//climg/5e69a6d509ddc55812280492.jpg

这是因为头部和底部设置的固定定位不占位置,导致第一张图片上移,第三张图片下移,可以给bodyer设置上下margin来解决:

http://img1.sycdn.imooc.com//climg/5e69a74f099f22b304360141.jpg

祝学习愉快~

  • 提问者 qq_慕容254374 #1
    老师我按照您说的设置了.bodyer的margin属性,但是为什么上图和下图还是有被覆盖掉的部分呢
    2020-03-13 22:05:54
  • 提问者 qq_慕容254374 #2
    我知道了老师,给.bodyer加上padding-top和padding-bottom就可以了
    2020-03-13 23:50:22
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师