3-3编程练习，觉得自己的代码略为冗杂，请老师帮忙批改看看

*{
    margin:0;
    padding:0;
}
body{
    min-width: 1500px;
}
.header{
    width:100%;
    height:100px;
    float: left;
    background-color:black;
}
.img{
    width:auto;
    height:100px;
    position:relative;
    display:inline;
    /*border:1px solid red;*/
}
.nav{
    width:auto;
    height:100px;
    display:inline;
    position:absolute;
    right:30px;
    top:0px;
    line-height:100px;
    /*border: 1px solid red;*/
}
.content{
    padding: 0 400px 0 400px;
}
.middle,.left,.login{
    position: relative;
    float: left;
    height:800px;
    /*border: 1px solid red;*/
}
.pic{
     width: 600px;
     height:400px;
 }
.left_n{
    width: 290px;
    height:400px;
}
.form{
    width:380px;
    height: 400px;
}
.pic,.left_n,.form{
    position: absolute;
    top:0;
    bottom: 0px;
    left: 0;
    right: 0;
    margin:auto auto;
    /*border: 1px solid green;*/
}
.middle{
    width: 100%;
    min-width: 700px;
    background-color: darkgray;
}
.left{
    margin-left:-100%;
    left: -400px;
    width: 400px;
    background-color: antiquewhite;
}
.login{
   margin-left: -400px;
    right:-400px;
    width: 400px;
    background-color:#B2DFEE;
}

span{
    color:white;
    font-family:"微软雅黑";
    padding:15px;
    font-size:20px;
}
.left span,.middle span{
    color:black;
    line-height:50px;
    margin-left: -10px;
    font-size: 15px;
}
h2{
    line-height: 50px;
    font-family:"黑体";
}
.in_text,.in_pas,.sub{
    width:350px;
    height:50px;
    line-height: 40px;
    margin:10px 15px;
}
.sub{
    background-color: red;
    color:white;
    font-size:18px;
    font-family: "微软雅黑";
}
.tail{
    width:100%;
    height:100px;
    background-color:black;
    text-align: center;
    float: left;
    bottom: 0px;
    /*border: 1px solid blue;*/
}
.tail span{
    line-height:100px;
}

<div class="header">
   <div class="img">
      <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/>
   </div>
   <div class="nav">
      <span>课程</span>
      <span>职业路径</span>
      <span>实战</span>
      <span>猿问</span>
      <span>手记</span>
   </div>
</div>
<div class="content">
   <div class="middle">
      <img class="pic" src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"/>
   </div>
   <div class="left">
      <div class="left_n">
      <h2>课程推荐</h2>
      <span>职业路径&nbsp;&nbsp;HTML5与CSS3实现动态网页<br/></span>
      <span>职业路径&nbsp;&nbsp;零基础入门Android语法与界面<br/></span>
      <span>职业路径&nbsp;&nbsp;iOS基础语法与常用控件<br/></span>
      <span>职业路径&nbsp;&nbsp;PHP入门开发<br/></span>
      <span>职业路径&nbsp;&nbsp;JAVA入门开发<br/></span>
      </div>
   </div>
   <div class="login">
      <div class="hr"></div>
      <div class="form">
         <h2>登录</h2>
         <form>
            <input type="text" name="username" v
                   placeholder="请输入登录邮箱/手机号" class="in_text"/><br/>
            <input type="password" name="pasw"
                   placeholder="6-16位密码，区分大小写，不能用空格" class="in_pas"/><br/>
            <input type="submit" name="sub" class="sub" value="登 录"/>
         </form>
      </div>
   </div>
</div>
<div class="tail">
   <span>网站首页</span>
   <span>企业合作</span>
   <span>人才招聘</span>
   <span>联系我们</span>
   <span>常见问题</span>
   <span>友情链接</span>
</div>

看看能不能精练些，或者大家有没有什么建议，总觉得自己写完下来脑子里都不清不楚的