2-6编程题,请问老师我的会不会很乱，需要改进的地方呢？

来源：2-7 编程练习

WeaverSimon

2018-01-10 00:13:00

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  body{
      margin:0;
      padding:0;
      font-size:16px;
      font-family: 微软雅黑;
      width: 100%
      height:auto;
  }
  .header{
      width:100%;
      height:100px;
      background-color:black;
      position:fixed;
  }
  .nav{
      top:50px;
      right:0;
      position:fixed;
      margin-top:-8px;
  }
  .nav-li{
      margin:0 30px;
      display: inline-block;
  }
  a:link,a:visited,a:hover,a:active{
  text-decoration:none;
  color:#fff;
  }
  .container img{
    width: 100%;
    display:block;

  }
.P1{
  padding-top: 100px
}
.P3{
  padding-bottom: 100px;
}

  .footer{
    width:100%;
    height:100px;  
    background-color: black;
    position: fixed;
    bottom: 0;
    text-align: center;
    line-height: 100px;
  }
   ul li{
    display: inline-block;
    margin:0 50px;
   }
.bottom{
    margin-top: -16px;
}
  </style>

</head>
<body>
    <div class="header">
        <a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></a>
      </div>
    <div class="nav">
        <span class="nav-li"><a href="#">课程</a></span>
		    <span class="nav-li"><a href="#">职业路径</a></span>
		    <span class="nav-li"><a href="#">实战</a></span>
		    <span class="nav-li"><a href="#">猿问</a></span>
		    <span class="nav-li"><a href="#">手记</a></span>
    </div>
    <div class="container">
        <div class="P1"><img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg"></div>
        <div class="P2"><img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg"></div>
        <div class="P3"><img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg"></div>
    </div>
    <div class="footer">
    <div class="bottom">     
        <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>

写回答

2回答

装完B就跑_真刺激

2018-01-10

看出来一点小问题，首先，最前面你使用了

  body{
      margin:0;
      padding:0;
      font-size:16px;
      font-family: 微软雅黑;
      width: 100%
      height:auto;
  }

这里只是清除body的padding和margin值，并没有清除全部的，所以才导致你后面 footer里面的bottom要使用下面代码才能对齐

.bottom{
    margin-top: -16px;
}

所以最上面应该使用清除全部的，这样下面的bottom代码就不用再处理了

*{
      margin:0;
      padding:0;
      }

还有个人感觉，最上面的导航部分最好也用<ul><li></li></ul>来实现最好！

共同进步，祝你学习愉快！

heaverSimon

h 非常感谢您的指导！

h018-01-11

共1条回复

WeaverSimon

提问者

2018-01-10

非常感谢指导，也祝您学业事业双丰收！

0 学习 · 36712 问题

查看课程

相似问题

2-6练习，请问老师这么实现有什么需要改进的地方吗

回答 2

CSS里面的这个男老师真的讲的不好

回答 1

2-9编程练习

回答 2

2-6两个问题

回答 4

2-6编程问题

回答 4

打开慕课网App查看更多内容