2-11 老师帮忙看一下代码，有哪些可以改进的地方。谢谢。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{
        margin: 0;
        padding: 0;
    }
    ul li{
        list-style-type: none;
        font-size: 16px;
        font-family: "微软雅黑";
    }
    .header{
        width: 100%;
        height: 100px;
        background-color: black;
        position: fixed;
        top: 0;
    }
    .logo{
        width: 300px;
        height: 100px;
        float: left;
        cursor: pointer;
    }
    .nav-ul{
        font-size: 16px;
        font-weight: bold;
        font-family: "微软雅黑";
        float: right;
        color: white;
        list-style-type: none;
    }
    .nav-ul li{
        line-height: 100px;
        float: left;
        padding: 0 10px;
        cursor: pointer;
    }
    .container{
        width: 100%;
        height: 1000px;
        
    }
    .left{
        width: 40%;
        height: 1000px;
        float: left;
        background-color: #66B3FF;
    }
    .middle{
        width: 19.5%;
        height: 1000px;
        float: left;
        background-color: #66B3FF;
    }
    .middle-line{
      width: .5%;
      height: 1000px;
      background-color: #FF5151;
      float: left;
    }
    .right{
      width: 40%;
      height: 1000px;
      float: right;
      background-color: white;
      background-color: #66B3FF;
    }
    .left-text{
        width: 300px;
        height: auto;
        margin-top: 150px;
        margin-left:200px;
    }
    .middle-text{
        width: 300px;
        height: auto;
        margin-top: 150px;
    }
    .left-ul li{
        padding: 10px 0;

    }
    .list{
        background-color: #FF5151;
        margin-right: 20px;
    }
    .middle-ul li{
        padding: 10px 0;
    }
    .footer{
        width: 100%;
        height: 60px;
        color: white;
        background-color: black;
        position: fixed;
        bottom: 0;
    }
    .footer-ul{
        height: 60px;
        width: 504px;
        margin: 0 auto;
    }
    .footer-ul li{
        line-height: 60px;
        float: left;
        padding: 0 10px;
    }
    .login{
       margin-left: 100px;
        margin-top: 150px;
        color: black;

    }
    input{
      width: 180px;
      height: 40px;
      margin-top: 20px;
      padding-left: 20px;
    }
    .login-btn{
      width: 200px;
      background-color: #FF2D2D;
      text-align: center;
      padding: 0;
      border: 0;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="header">
          <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" class="logo"/>
      <ul class="nav-ul">
          <li>课程</li>
          <li>职业路径</li>
          <li>实战</li>
          <li>猿问</li>
          <li>手记</li>
      </ul>
  </div>

  <div class="container">
      <div class="left">
          <div class="left-text">
              <h3>课程推荐</h3>
              <ul class="left-ul">
                  <li><span class="list">职业路径</span>HTML5与CS3实现动态网页</li>
                  <li><span class="list">职业路径</span>HTML5与CS3实现动态网页</li>
                  <li><span class="list">职业路径</span>HTML5与CS3实现动态网页</li>
                  <li><span class="list">职业路径</span>HTML5与CS3实现动态网页</li>
                  <li><span class="list">职业路径</span>HTML5与CS3实现动态网页</li>
              </ul>
          </div>
      </div>
    
      <div class="middle">
          <div class="middle-text">
              <h3>相关课程</h3>
              <ul class="middle-ul">
                  <li>HTML CSS JavaScri</li>
                  <li>HTML CSS JavaScri</li>
                  <li>HTML CSS JavaScri</li>
              </ul>
          </div>
      </div>
    <div class="middle-line"></div>
    <div class="right">
      
      <div class="login">
        <h2>登录</h2>
          <form>
            <input type="text" name="username" placeholder="请输入用户名和密码">
            <br/>
            <input type="password" name="pwd" placeholder="6~16位密码,区分大小写">
            <br/>
            <input type="submit" name="submit" value="登录" class="login-btn">
          </form>
        </div>

    </div>
      
  </div>

  <div class="footer">
    <ul class="footer-ul">
      <li>网站首页</li>
      <li>企业合作</li>
      <li>人才招聘</li>
      <li>联系我们</li>
      <li>常见问题</li>
      <li>友情链接</li>
    </ul>
  </div>
</body>
</html>

Ecomools 2017-07-26

源自：CSS网页布局基础 2-12 编程练习

收起

1回答

樱桃小胖子回答被采纳获得+3积分 2017-07-26 18:10:39

测试了你的代码，效果实现的很好，每个人的编码思维和编码逻辑不一样，因此实现的代码也不一样，只要能够实现效果且没有冗佘的代码即可！希望可以帮到你！

收起回答

Ecomools 提问者 #1

非常感谢！

2017-07-27 12:05:35
Ecomools 提问者 #2

啊老师，还有个问题，就是当我的浏览器的窗口缩小的时候，一些排版就会错乱，这些要怎么解决啊

2017-07-27 12:10:18
樱桃小胖子回复提问者 Ecomools #3

建议设置min-width最小宽度，让页面缩小到一定大小不再缩小，祝学习愉快！

2017-07-27 13:36:34