麻烦老师帮我看下作业效果

来源：2-12 编程练习

Rockets总冠军

2019-05-23 16:05:31

老师您好，以下是我的代码，自己感觉写的特别乱，就是拼拼凑凑的，心里已经没有一个整体的框架，最后就是有什么问题，修改一下，乱试了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    /*此处写代码*/
    *{
       margin:0;
       padding:0;
    }
    .nav{
       height:100px;
       width:100%;
       background-color:#000;
       color:white;
       position:fixed;
       top:0;
       left:0;
    }
    .logo{
       width:300px;
       height:100px;
       background:url(http://img1.sycdn.imooc.com\/climg/58c0d2d900016ce303000100.png);
       float:left;
       cursor:pointer;
    }
    .nav-line{
       height:100px;
       width:auto;
       position:absolute;
       right:0;
    }
    .nav-line ul li{
       list-style:none;
       float:left;
      line-height:100px;
      font-size:25px;
      margin:0 25px;
    }
    .main{
      width:100%;
      height:2000px;
      background: #1a5acd;
      padding-top:100px;
    }
    .contain{
      width:80%;
      height:auto;
      margin: 0 auto;
    }
    .left{
      width:40%;
      float:left;
      font-size:20px;
      margin-top:20px;
    }
    .right{
      width:30%;
      float:left;
      font-size:20px;
      margin-top:20px;
    }
    .line{
      width:1%;
      height:2000px;
      background:orange;
      float:left;
    }
    .login{
      width:29%;
      float:right;
      font-size:20px;
      margin-top:20px;
    }
    .left p,.right p,.login div{
      margin-top:15px;
    }
    .login div,.login h2{
      margin-left:20px;
    }
    input{width:80%;
          height:40px;
    }
    input[type="button"]{
        border:none;
        background:red;
        color:#ffffff;}
    span{
      background-color:yellow;
    }
    .footer{
       height:90px;
       width:100%;
       position:fixed;
       bottom:0;
       left:0;
       background-color:#000;
       color:white;
    }
    .footer-line{
       overflow:hidden;
       zoom:1;
       position:absolute;
       left:50%;
       margin-left:-594px;
    }
    .footer-line ul li{
       list-style:none;
       float:left;
        line-height:90px;
        font-size:20px;
        margin:0 35px;
    }

</style>
</head>
<body>

<div class="container">
   <div class="nav">
   <div class="logo"></div>
    <div class="nav-line">
       <ul>
           <li>课程</li>
           <li>职业路径</li>
           <li>实战</li>
           <li>猿问</li>
           <li>手记</li>
       </ul>
    </div>
   </div>
   <div class="main">
      <div class="contain">
       <div class="left">
        <h2>课程推荐</h2>
        <p><span>职业路径</span>  HTML5与CSS3实现动态网页</p>
        <p><span>职业路径</span>  零基础入门Android语法与界面</p>
        <p><span>职业路径</span>  iOS基础语法与常用控件</p>
        <p><span>职业路径</span>  PHP入门开发</p>
        <p><span>职业路径</span>  JAVA入门开发</p>
      </div>
      <div class="right">
        <h2>相关课程</h2>
        <p>HTML  CSS  JavaScript</p>
        <p>HTML5  CSS3  Jquery</p>
        <p>移动端基础  移动端APP开发</p>
      </div>
      <div class="line"></div>
      <div class="login">
        <h2>登录</h2>
        <div><input type="text" placeholder="请输入登录邮箱/手机号" maxlength="20px" size="30px"></div>
        <div><input type="password" size="30px" placeholder="6-16位密码，区分大小写,不能用空格" maxlength="30px"></div>
        <div><input type="button" value="登陆" /></div>
      </div>
    </div>
   </div>
   <div class="footer">
    <div class="footer-line">
        <ul>
                <li>网站首页</li>
                <li>企业合作</li>
                <li>人才招聘</li>
                <li>联系我们</li>
                <li>常见问题</li>
                <li>友情链接</li>
        </ul>
    </div>
   </div>
</div>
</body>
</html>