麻烦老师批改，谢谢

来源：2-10 编程练习

慕九州1456286

2019-06-12 20:41:21

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           /*头部样式区*/
           .hearder{
               width: 100%;
               height: 100px;
               background: black;
           }
           .logo{
               float: left;
               height: 100px;
           }
           .nav{
               float: right;
           }
           .nav ul li{
               display: inline-block;
               list-style-type: none;
               margin-right: 40px;
           }
           .nav ul li a{
               text-decoration: none;
               color: white;
               font-size: 32px;
               line-height: 100px;
           }
           /*中部样式区*/
           .container{
               background-color: #add8e6;
               width: 100%;
               height: 768px;
               padding-top: 50px;
           }
           .bd1{
               width: 20%;
               float: left;
               text-align: left;
               margin-left: 30%;
           }
           h3{
               height: 60px;
               line-height: 60px;
           }
           .container ul li{
               height: 40px;
               line-height: 40px;
               list-style-type: none;
           }
           .container a{
               text-decoration: none;
               color: #000000;
               margin-left: 20px;
           }
           .bd1 ul li span{
               background-color: #ff9999;
           }
           .bd2{
               width: 20%;
               float: right;
               margin-right: 30%;
               text-align: left;
           }
           .bd2 h3{
               padding-left: 15px;
           }
           /*底部样式区*/
           .footer{
               width: 100%;
               height: 100px;
               background: black;
               text-align:center;
               position: fixed;
               bottom: 0;
           }
           .footer ul li{
               display: inline-block;
               list-style-type: none;
           }
           .footer ul li a{
               text-decoration: none;
               color: white;
               font-size: 20px;
               line-height: 100px;
               margin: 0 20px;
           }
       </style>
   </head>
   <body>
       <div class="hearder">
           <div class="logo">
               <a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt="" /></a>
           </div>
           <div class="nav">
               <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="container">
           <div class="bd1">
               <h3>课程推荐</h3>
               <ul>
                   <li><span>职业路径</span><a href="#">HTML5与CSS3实现动态网页</a></li>
                   <li><span>职业路径</span><a href="#">零基础入门Android语法与界面</a></li>
                   <li><span>职业路径</span><a href="#">ios基础语法与常用软件</a></li>
                   <li><span>职业路径</span><a href="#">PHP入门开发</a></li>
                   <li><span>职业路径</span><a href="#">JAVA入门开发</a></li>
               </ul>
           </div>
           <div class="bd2">
               <h3>相关课程</h3>
               <ul>
                   <li><a href="">HTML5</a><a href="#">CSS</a><a href="">JavaScript</a></li>
                   <li><a href="">HTML5</a><a href="#">CSS3</a><a href="">Jquery</a></li>
                   <li><a href="">移动端基础</a><a href="#">移动端app开发</a></li>
               </ul>
           </div>
       </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>
               <li><a href="#">友情链接</a></li>
           </ul>
       </div>
   </body>
</html>