麻烦老师批改，谢谢。

来源：3-4 双飞翼布局及案例（了解即可）

慕九州1456286

2019-06-24 21:35:13

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>步骤二.3.3编程练习</title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           /*头部------------------------------------------------------------------*/
           .hearder{
               width: 100%;
               height: 100px;
               background-color: #000;
           }
           .hearder img{            /*使得图片的高度与父级高度保持一致*/
               display: inline-block;
               height: 100px;
           }
           .hearder ul{
               float: right;
               height: 100px;
           }
           .hearder ul li{
               display: inline-block;
               list-style-type: none;
               line-height: 100px;
               font-size: 1.5em;
               margin: 0 20px;
           }
           .hearder ul li a{
               float: left;
               text-decoration: none;
               color: white;
           }
           /*主体-----------------------------------------------------------------------*/
           .container{
               min-width: 700px;
               height: 768px;
           }
           /*底部*/
           .footer{
               width: 100%;
               height: 100px;
               background-color: #000000;
               text-align: center;
               position: fixed;
               bottom: 0;
           }
           .footer ul li{
               display: inline-block;
               list-style-type: none;
               margin: 0 20px;
               line-height: 100px;
           }
           .footer ul li a{
               text-decoration: none;
               color: white;
               font-size: 1.5em;
           }
           /*圣杯布局*/
           .container{
               padding: 0 20% 0 20%;
           }
           .middle,
           .left,
           .right{
               position: relative;
               float: left;
               min-height: 769px;
           }
           /*中间*/
           .middle{
               width: 100%;
               background-color: #ffc0cb;
               text-align: center;
           }
           .middle img{
               margin: 150px;
           }
           /*左侧-------------------------------------------------------------*/
           .left{
               width: 384px;
               background-color: #ffefdb;
               margin-left: -100%;
               left: -384px;
           }
           .left h3{
               height: 2em;
               line-height: 2em;
               margin-top: 150px;
               margin-left: 30px;
           }
           .left ul li{
               list-style-type: none;
               height: 2em;
               line-height: 2em;
               margin-left: 40px;
           }
           .left ul li span{
               background-color: #ee9572;
               margin-right: 1em;
           }
           .left ul li a{
               color: #000;
               text-decoration: none;
           }
           /*右侧---------------------------------------------------------------------*/
           .right{
               width: 384px;
               background-color: #add8e6;
               margin-left: -384px;
               right: -384px;
           }
           .right h3{
               height: 2em;
               line-height: 2em;
               margin-top: 150px;
               margin-left: 50px;
           }
           .right ul li{
               list-style-type: none;
               height: 2em;
               margin-top: 20px;
               margin-left: 60px;
               line-height: 2em;
           }
           .right .one{
               display: inline-block;
               width: 230px;
               height: 3em;
           }
           .right .two{
               display: inline-block;
               width: 230px;
               height: 3em;
           }
           .right .three{
               display: inline-block;
               width: 230px;
               height: 3em;
               background-color: red;
               color: white;
               font-size: em;
           }
       </style>
   </head>
   <body>
       
       <div class="hearder">
           <img src="http://climg.mukewang.com/590037f600016ce303000100.png"/>
           <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 class="container">
           
           <div class="middle">
               <img src="http://climg.mukewang.com/590037e00001fab706000400.jpg"/>
           </div>
           
           <div class="left">
               <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="right">
               <ul>
                   <h3>登录</h3>
                   <li><input class="one" type="text" placeholder="请输入登录邮箱/手机号" /></li>
                   <li><input class="two" type="password" placeholder="6-16位密码,区分大小写,不能用空格"/></li>
                   <li><input class="three" type="submit" value="登录"/></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>