老师请检查，什么可以优化的地方

来源：3-3 编程练习

keepangry2297447

2020-03-19 15:51:28

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3-3练习</title>
<style>
  *{
   margin: 0;
   padding: 0;
  }
  .header{
   width: 100%;
   height: 100px;
   background: #000;
   overflow: hidden;
   zoom:1;  }
  .header img{
   display: block;
   float: left;
   margin: 0 20px;
   line-height: 100px;
  }
  .header ul{
   float: right;
   margin-right: 45px;
  }
  .header li{
   list-style: none;
   font-family: "微软雅黑";
   font-size:20px;
   color: #fff;
   float: left;
   padding: 0 15px;
   line-height: 100px;
  }
  .header li:hover{
   cursor: pointer;
   color: orange;
  }
  .main{
   min-width: 600px;
   height: 100%;
   padding: 0 300px;
  }
  .middle{
   width: 100%;
   height: 600px;
   background: pink;
  }
  .middle img{
   position: relative;
   left: 50%;
   top:300px;
   margin-left:-300px;
   margin-top:-200px;
  }
  .left{
   background: #fc9;
   width: 280px;
   height: 600px;
   margin-left:-100%;
   left:-300px;
   padding-left: 20px;
  }
  .right{
   background: #99cccc;
   width: 280px;
   height: 500px;
   margin-left:-300px;
   right: -300px;
   padding-top: 100px;
   padding-left: 20px;
  }
  .left,.right,.middle{
   float: left;
   position: relative;
   margin-bottom: 100px;  }
  .h2{
   font-family: "微软雅黑";
   font-size: 25px;
   margin-bottom: 20px;  }
  p,span{
   font-family: "微软雅黑";
   font-size: 12px;
   line-height: 20px;
  }
  .left p{
   display: inline-block;
   background: pink;
   margin: 5px;
   padding: 5px;
  }
  .con{
   position: relative;
   margin-top: 100px;
  }
  .h2_1{
   background: #f00;
   height: 30px;
   width: 232px;
   margin: 15px 0;
   text-align: center;
   line-height: 30px;
  }
  .footer{
   height: 100px;
   width: 100%;
   background: #000;
   position: fixed;
   bottom: 0;
   font-family: "微软雅黑";
   font-size:20px;
   color: #fff;
   padding: 0 20px;
   margin: 0 auto;  }
  .footer li{
   list-style: none;
   float: left;
   line-height: 100px;
   padding: 0 25px;  }
  .footer li:hover,.left p:hover,.h2_1:hover{
   cursor: pointer;
   color: orange;
  }
  .footer ul,{
   text-align: center;
   height: 100px;
   width: 805px;
   margin:0 auto;
  }
  .container{
   position: relative;
  }
</style>
</head>
<body>
<div class="container">
  <div class="header">
   <img src="http://climg.mukewang.com/590037f600016ce303000100.png" >
   <ul>
    <li>课程</li>
    <li>职业路径</li>
    <li>实战</li>
    <li>猿问</li>
    <li>手记</li>
   </ul>
  </div>
  <div class="main">
   <div class="middle">
    <img src="http://climg.mukewang.com/590037e00001fab706000400.jpg" >
   </div>
   <div class="left">
    <div class="con"></div>
     <h2>课程推荐</h2>
     <p>职业路径</p><span>HTML5和CSS实现动态网页</span><br/>
     <p>职业路径</p><span>零基础入门Android语法与界面</span><br/>
     <p>职业路径</p><span>iOS基础语法与常用控件</span><br/>
     <p>职业路径</p><span>PHP入门开发</span><br/>
     <p>职业路径</p><span>Java入门开发</span><br/>
    </div>
   </div>
   <div class="right">
    <div class="text">
     <h2 class="h2">登录</h2>
     <input type="text" size="35" placeholder="请输入登录邮箱/手机号" style="height: 30px;width: 230px;">
     <br/>
     <br/>
     <input type="password" size="35" placeholder="6-16位密码，区分大小写，不能用空格" style="height: 30px;width: 230px;"><br/>
     <h2 class="h2_1">登录</h2>
    </div>
   </div>
  </div>
  <div class="footer">
   <ul>
    <li>网站首页</li>
    <li>企业合作</li>
    <li>人才招聘</li>
    <li>联系我们</li>
    <li>常见问题</li>
    <li>友情链接</li>
   </ul>
  </div>
</div>
</body>
</html>