2-9编程练习部分

首页课程实战体系课手记专栏慕课教程

2-9编程练习部分

来源：2-11 经典的三列布局

萱草香篱

2017-05-23 22:32:40

老师帮忙看下以下问题：

中间conter部分当缩小屏幕时，蓝色背景会随着变动，导致有白色背景出来；
中间右部分“相关课程”里面的内容与题目不以样，不知如何处理；
页尾部分内容不居中。
以下是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
      *{margin:0;padding:0;}
      .header{width:100%;height:100px;margin:0 auto;background:black;position:fixed;}
      img{float:left;}
      .nav1 ul{list-style-type:none;float:right;}
      .nav1 li{float:left;line-height:100px;font-size:16px;margin-right:50px;color:white;}
      .conter{width:100%;height:800px;background:#DDFFFF;padding:100px;margin:0 auto;}
      .left{width:50%;float:left;}
      .right{width:50%;float:right;}
      .footer{width:100%;height:100px;margin:0 auto;background:black;position:fixed;bottom:0;}
      .nav2 ul{list-style-type:none;}
      .nav2 li{float:right;line-height:100px;font-size:16px;color:white;margin-left:30px;}
    /*此处写代码*/
</style>
</head>
<body>
    <div class="header">
        <div><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" /></div>
        <div class="nav1">
            <ul>
              <a href="#"><li>课程</li></a>
              <a href="#"><li>职业路径</li></a>
              <a href="#"><li>实战</li></a>
              <a href="#"><li>猿问</li></a>
              <a href="#"><li>手记</li></a>
            </ul>
        </div>
    </div>
    <div class="conter">
        <div class="left">
            <table cellspacing="20px" cellpadding="10px">
                 <tr>
                <th colspan="2">课程推荐</th>

             </tr>
             <tr>
                <td bgcolor="red">职业路径</td>
                <td>HTML5和CSS3实现网页动态</td>
             </tr>
             <tr>
                <td bgcolor="red">职业路径</td>
                <td>零基础入门语法</td>
             </tr>
             <tr>
                <td bgcolor="red">职业路径</td>
                <td>iso基础语法与常用控件</td>
             </tr>
             <tr>
                <td bgcolor="red">职业路径</td>
                <td>PHP入门开发</td>
             </tr>
             <tr>
                <td bgcolor="red">职业路径</td>
                <td>java热门开发</td>
             </tr>
            </table>
        </div>
        <div class="right">
           <table cellspacing="20px" cellpadding="10px">
            <tr>
               <th colspan="3">相关课程</th>

            </tr>
            <tr>
               <td>HTML</td>
               <td>CSS</td>
               <td>JaveScript</td>
            </tr>
            <tr>
               <td>HTML</td>
               <td>CSS</td>
               <td>Jquery</td>
            </tr>
            <tr>
               <td>移动端基础</td>
               <td>移动端app开发</td>
               <td></td>
            </tr>
          </table>
        </div>
    </div>
    <div class="footer">
              <div class="nav2">
          <ul>
              <a href="#"><li>网站首页</li></a>
              <a href="#"><li>企业合作</li></a>
              <a href="#"><li>人才招聘</li></a>
              <a href="#"><li>联系我们</li></a>
              <a href="#"><li>常见问题</li></a>
              <a href="#"><li>友情链接</li></a>
          </ul>
</div>
    </div>

</body>
</html>