麻烦老师检查，改进

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{
      padding: 0px;
      margin: 0px;
      font-size: 24px;
      font-family:"微软雅黑";
      text-decoration: none;
    }
    .aa{
      width: 100%;
      background: black;
      overflow: hidden;
      zoom:1;
      position: fixed;
      top: 0px;
    }
    .aa1{
      float: left;
      height: 100px;
    }
    .aa2{
      height: 100px;
      overflow: hidden;
      text-align: center;
    }
    .aa2 ul li{
      float: left;
      color: white;
      list-style: none;
      line-height: 100px;
      margin: 0px 20px;
    }
    .bb .bb1{
      margin-top: 100px; 
    }
    .bb .bb3{
      margin-bottom: 100px; 
    }
    .cc{
      width: 100%;
      height: 100px;
      background: black;
      color: white;
      position: fixed;
      bottom: 0px;
      overflow: hidden;
      zoom:1;
    }
    .cc ul li{
      float: left;
      list-style: none;
      line-height: 100px;
      font-size: 24px;
      margin: 0px 20px;
    }
    img{
      width: 100%;
      height: auto;
      display: block;
    }
    a:link {
      color: white;
    }
    a:visited {
      color: white;
    }
    a:hover {
      color: white;
    }
    a:active {
      color: white;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="aa">
    <div class="aa1">
      <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
    </div>
    <div class="aa2">
      <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="bb">
    <div class="bb1">
      <img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg">
    </div>
    <div class="bb2">
      <img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg">
    </div>
    <div class="bb3">
      <img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg">
    </div>
  </div>
  <div class="cc">
     <div class="cc1">
      <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>

三年没洗澡 2018-12-06

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

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2018-12-06 14:23:42

1、顶部导航没有右侧显示：

建议给右侧导航整体设置宽度和右浮动，参考：

2、底部导航没有居中显示：

建议给ul盒子设置固定宽度，使用margin居中显示，参考：

3、a标签字体颜色为白色，直接设置即可，不需要写多种状态下的颜色：

自己完善测试下，祝学习愉快！

收起回答

三年没洗澡提问者 #1

建议给ul盒子设置固定宽度，使用margin居中显示，这一条为什么只对下面的导航有效，而对上面的导航不起作用呢？

2018-12-06 14:36:51
好帮手慕星星回复提问者三年没洗澡 #2

老师给你截的图片是在底部的ul中添加的行内样式，所以只对底部生效，自己可以在style中添加样式试试。

2018-12-06 14:45:29
三年没洗澡提问者回复好帮手慕星星 #3

不是，我没用行内样式，我是直接给ul标签设置的样式，但是居中只对下面的导航生效了，对上面的不生效，不知道为什么

2018-12-06 15:40:38