还有好多问题，请老师指导怎么改进。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      *{padding:0;margin:0;color:#fff;font-size: 16px;}
      .header{width:100%;min-width: 800px;height: 100px;background:#000;color:#fff;text-align: center;line-height: 100px;position: fixed;top:0px;}
      .logo{float:left;width:30%;}
      .header_navi{float:right; width:30%;min-width: 300px;}
      .header_navi ul{list-style-type:none;}
      .header_navi ul li{display:inline-block;padding:10px; color:#fff;}
      .header_navi ul li a{text-decoration: none;color:#fff;}
      .container{width:100%;min-width:800px;font-size: 0px;margin:100px auto;}
      .container img{width:100%;margin:0;}
      .footer{width:100%;height:100px;background: black;position:fixed;bottom: 0;align-items: center;}
      .footer ul{list-style-type: none; width:500px; margin:0 auto;}
      .footer ul li{float:left; text-align:center;width:100px;height: 100px;line-height: 100px;}
      .footer ul li a{text-decoration: none;}
    </style>
  </head>
  <body>
    <!-- Header Section -->
    <div class="header">
      <div class="logo">
        <a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt=""></a>
      </div>
      <div class="header_navi">
        <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>
 
    <!-- Page Container -->
    <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><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>
  </body>
</html>

杰克不接客 2017-10-31

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

收起

1回答

卡布琦诺回答被采纳获得+3积分 2017-10-31 14:34:39

顶部右侧导航没有垂直居中，建议左右距离使用paddin:0 10px;垂直居中使用line-height

.header_navi ul li {
    display: inline-block;
    /*padding: 10px;*/
    line-height:100px;
    padding:0 10px;
    color: #fff;
}

除了顶部右侧的导航没有实现垂直居中意外，其他的实现的很好，继续加油~

收起回答

杰克不接客提问者 #1

但是当把浏览器的窗口拉小的时候，顶部右侧会换行，这个我还没想到如何解决。

2017-10-31 14:49:00
卡布琦诺回复提问者杰克不接客 #2

这个目前的解决方案是建议设置min-width，让页面缩小到一定程度，不再缩小，你的换行是因为你把header中的min-width设置的值过小，建议设置成min-width: 1200px;即可，希望可以帮到你~

2017-10-31 15:00:50
杰克不接客提问者 #3

非常感谢！

2017-10-31 15:22:07