老师，请帮我解惑，代码尾部有问题，谢谢老师。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    /*此处写代码*/
    body{
        margin:0;padding:0;color:#fff;text-align:center;
    }
    .header{
        width:100%;height:100px;background:#333;top:0;position:absolute;margin:0 auto;position:fixed;
    }
.logo{
  float:left;
  height:100px;
}
.nav{
  float:right;
  height:100px;
}

    .nav a{
        margin:20px;
  line-height:100px;

    }
    .container{
        width:100%;background:#add8e6;top:100px;bottom:100px;position:absolute;
    }
    .left{
        width:50%;top:100px;bottom:100px;float:left;position:relative;
    }
.container1{
  margin:0 auto;
  color:#333;
}
.container2{
  color:#333;
}
.container1 a, .container2 a{
  text-decoration:none;
  color:#333;
}
    .right{
        width:50%;top:100px;bottom:100px;float:right;position:relative;
    }
    .footer{
        width:100%;height:100px;background:#333;position:absolute;bottom:0;position:fixed;
    }
.footer a{
        margin:20px;
  line-height:100px;

}
</style>
</head>
<body>

<div class="header">
    <div class='logo'>
        <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/>
    </div>
    <div class='nav'>
            <a herf="#">课程</a><a herf="#">职业路径</a><a herf="#">实战</a> <a herf="#">猿问</a><a herf="#">手记</a>

    </div>
</div>

<div class="container">
    <div class="left">
  <table class="container1">
            <tr><td colspan="3" align='left'><h3>课程推荐</h3></td>
      <tr><td bgcolor='e8aaae'>职业路径</td><td>  </td><td align='left'><a href="#">HTML5与CSS实现动态网页</a></td></tr>
      <tr><td bgcolor='e8aaae'>职业路径</td><td>  </td><td align='left'><a href="#">零基础入门Android语法与界面</a></td></tr>
      <tr><td bgcolor='e8aaae'>职业路径</td><td>  </td><td align='left'><a href="#">iOS基础语法与常用控件</a></td></tr>
      <tr><td bgcolor='e8aaae'>职业路径</td><td>  </td><td align='left'><a href="#">PHP入门开发</a></td></tr>
      <tr><td bgcolor='e8aaae'>职业路径</td><td>  </td><td align='left'><a href="#">JAVA入门开发</a></td></tr>
  </table>

</div>
    <div class="right">
  <table class="container2">
            <tr><td colspan="3" align='left'><h3>相关课程</h3></td>
      <tr align='left'><td><a href="#" >HTML</a></td><td> <a href="#">CSS</a></td><td><a href="#">  JavaScript</a></td></tr>
      <tr align='left'><td><a href="#" >HTML5</a></td><td> <a href="#">CSS3</a></td><td><a href="#">  Jquery</a></td></tr>
      <tr align='left'><td><a href="#" >移动端基础</a></td><td colspan="2">  <a href="#"> 移动端APP开发</a></td></tr>

  </table>
    </div>
</div>
<div class="footer">
  <a herf="#">网站首页</a><a herf="#">企业合作</a><a herf="#">人才招聘</a> <a herf="#">联系我们</a><a herf="#">常见问题</a>
  <a herf="#">友情链接</a>
</div>
</body>
</html>

疑惑：

（1）老师，请帮我检查代码是否存在细节不足之处；

（2） position:absolute;与position:relative;没有理解透意思，比如页面主体部分，container使用的是position:absolute;，而主题的左侧与右侧left、right使用position:relative;才达到效果，这是怎么理解的？

（3）主体部分为了对齐我选择了使用表格，个人觉得比较繁琐，老师是否有更好的简洁的解决方法，请给我建议；

weixin_慕标3013322 2019-09-18

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

收起

3回答

好帮手慕糖 2019-09-19 09:55:31

同学你好，老师又测试了下，还是有背景颜色哦。可以将你修改的代码粘贴过来，老师再测试下哦。

祝学习愉快！

收起回答

好帮手慕糖 2019-09-18 18:23:41

同学你好，1、margin:20px，会设置上下左右是个方向的外边距多为20，对垂直方向也有影响，所以建议：只设置左右的，改为margin:0 20px;

2、没有背景颜色，有设置高度吗？上个回复中有说哦，主体部分需要设置高度，例：

希望能帮助到你，祝学习愉快！

收起回答

提问者 weixin_慕标3013322 #1

老师，代码和你说的一模一样就是按照你的改的。但是还是没有背景颜色

2019-09-19 08:41:47

好帮手慕糖 2019-09-18 15:37:32

同学你好，1、整体效果实现不错，还有些代码需要优化下，一个是同学的（2）（3）中提到的主体部分，这个在（2）（3）会给出优化建议。

另一个是顶部以及页脚部分的导航项在垂直方向实现居中不建议使用外边距设置居中，建议：接设置行高等于高度即可实现垂直居中。例：

2、（1）绝对定位是相对于有定位的（除静态定位以外的）最近的祖先元素定位。若是子元素是相对定位，那么是相对于自身定位的，与父级是否有定位无关。

（2）这里设置绝对定位也是可以的，但是绝对定位是相对于父级定位的，所以不仅要设置top，还有设置left来设置距离哦。

（3）这里且是不需要设置定位的，使用浮动使其在一行显示即可。不使用定位的话，将left等换为外边距来调整间距，且主体部分需要设置高度。例：

3、不使用表格，可以使用ul列表，或者使用p都是可以的哦。以ul列表为例，如下：

span包裹的文字，设置背景颜色，然后调整间距即可。

希望能帮助到你，祝学习愉快！

收起回答

提问者 weixin_慕标3013322 #1

（1）老师，第一个问题，margin:20px，不是为了在垂直方向居中的，而是每个导航向之间的间距，不然就连在一起了；（2）第二个问题我按照老师给的代码修改了但是实现不了相应的效果，中间主体的背景颜色没有了呢，老师。

2019-09-18 16:52:07