请老师检查代码有哪里可以优化？

来源：3-3 编程练习

TaraTara

2020-03-23 19:13:54

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{
        margin:0;
        padding:0;
    }
    
    .header{
        width:100%;
        height:100px;
        background-color:#000;
        position:fixed;
        line-height:100px;
        font-size:20px;
        top:0px;
        
    }
    .logo{
        float:left;
    }
    
    .navi{
        position:fixed;
        right:0px;
    }
    .navi li{
        color:white;
        display:inline-block;
        margin-right:30px;
        float:left;
    }
    .footer{
         width:100%;
         height:100px;
         line-height:100px;
         color:white;
         font-size:20px;
         
          background-color:black;
          position: fixed;
          text-align:center;
          bottom:0;
    }
    
     .footer ul li{
          padding:0 25px;
          display:inline-block;
         
       }
      ul{
           list-style: none;
           display:inline-block;
           
       }
      a{
           text-decoration:none;
           color:white;
       }
       a:hover{
           color:orange;
       }
       html, body{
           height:100%;
       }
       .container{
           padding: 100px 320px 0 400px;
           height:100%;
       }
       
       .left,
       .middle,
       .right {
        position: relative;
        float: left;
        height:100%;
    }
    
       .middle{
        width: 100%;
        background: pink;
        text-align:center;
       }
       .left{
        margin-left: -100%;
        left: -400px;
        width: 400px;
        background: wheat;
       }
       .right{
        margin-left: -320px;
        right: -320px;
        width: 320px;
        background: LightSkyBlue;
       }
       span{
           background-color:pink;
       }
       h1,.middle img{
           margin-top:200px;
       }
       .left ul,form{
           margin-top:50px;
       }
       h1,.left ul, form{
           margin-left:10%;
       }
       
       .left ul li{
           margin-bottom:20px;
       }
       input{
           margin-bottom:20px;
           width:200px;
           margin-bottom:20px;
       }
       .buttom{
           background-color:red;
           border:none;
           width:204px;
       }
       
       
       
       
  </style>
</head>
<body>
  <!-- 此处写代码 -->
    <div class="header">
       <div class="logo">
        <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
      </div>
      <ul class="navi">
          <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">
          <h1>课程推荐</h1>
          <ul>
              <li><span>职业路径</span> HTML5与CSS3实现动态网页</li>
              <li><span>职业路径</span> 零基础入门android语法与界面</li>
              <li><span>职业路径</span> IOS基础语法与常用控件</li>
              <li><span>职业路径</span> PHP入门开发</li>
              <li><span>职业路径</span> JAVA入门开发</li>
          </ul>
      </div>
        <div class="right">
          <h1>登录</h1>
          <form>
              <table>
                  <tr>
                      <td><input type="text" placeholder="请输入登录手机号" name="username"></td>
                  </tr>
                  <tr>
                      <td><input type="password" placeholder="请输入密码" name="password"></td>
                  </tr>
                  <tr>
                      <td><input type="submit" value="登录" name="submit" class="buttom"></td>
                  </tr>
              </table>
              
          </form>
      </div>
    </div>
    <div class="footer">
      <div>
          <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>
  
</body>
</html>