请老师检查代码是否有可以改进地方谢谢。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{
      margin: 0;
      padding: 0;
      font-size: 18px;
      color: white;
    }
    .nav{
        width:100%;
        height: 100px;
        background: black;
        line-height: 100px;
        position: fixed;
        top: 0;
        overflow: hidden;
    }
    .logo{
    	width: 30%;
    	height: 100px;
    	background:url(http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png) no-repeat;
    	float: left;
    }
    .list1{
      margin-left: 760px;
      width: 70%;
      height: 100px;
    }
    .list1 ul li{
    	float: left;
    	padding-right: 40px;
    	list-style: none;
    	}
    a{text-decoration: none;}
    a:hover{font-weight: bold;}
    a:visited{color: white;}
    .content{
    	width: 100%;
    }
    .content .pic1{
      width: 100%;
      height: 480px;
      margin-top: 100px;
    	background: url(http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg) no-repeat;
    }
    .content .pic2{
      width: 100%;
      height: 480px;
      background: url(http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg) no-repeat;
    }
    .content .pic3{
      width: 100%;
      height: 480px;
      background: url(http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg) no-repeat;
    }
    .footer{
        width:100%;
        height: 100px;
        background: black;
        line-height: 100px;
        position: fixed;
        bottom: 0;
        text-align: center;
        overflow: hidden;
    }
    .list2 ul{
    	display: inline-block;
    }
    .list2 ul li{
    	float: left;
    	list-style: none;
    	padding: 0 20px;
    	display: inline; 
    }
    .list2{
    	marigin:auto auto;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="nav">
      <div class="logo"></div>
      <div class="list1">
      	<ul>
      		<li><a href="#">课程</a></li>
      		<li><a href="#">职业路径</a></li>
      		<li><a href="#">实战</a></li>
      		<li><a href="#">猿问</a></li>
      		<li><a href="#">手记</a></li>
      	</ul>
      </div>
  </div>
  <div class="content">
  	<div class="pic1"></div>
  	<div class="pic2"></div>
  	<div class="pic3"></div>
  </div>
  <div class="footer">
  	<div class="list2">
  		<ul>
	  		<li><a href="#">网站首页</a></li>
	  		<li><a href="#">企业合作</a></li>
	  		<li><a href="#">人才招聘</a></li>
	  		<li><a href="#">联系我们</a></li>
	  		<li><a href="#">常见问题</a></li>
	  		<li><a href="#">友情链接</a></li>
  		</ul>
  	</div>
  </div>
</body>
</html>

JovetWang 2020-02-05

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

收起

1回答

好帮手慕粉回答被采纳获得+3积分 2020-02-06 09:50:55

同学你好，同学的第三张图片被底部遮挡了一部分：

是因为底部固定定位不占位置，导致图片下移，建议同学给图片添加一个margin-bottom值：

如果我的回答帮助了，欢迎采纳，祝学习愉快~

收起回答

JovetWang 提问者 #1

是因为底部的footer使用了固定定位脱离了常规流导致pic3被遮住了是吗

2020-02-06 11:16:41
好帮手慕粉回复提问者 JovetWang #2

同学你好，是的，老师在第一次回答里面说了呢，图片下移，就被底部的footer挡住了，跟头部是一个道理。如果我的回答帮助了，欢迎采纳，祝学习愉快~

2020-02-06 11:22:53