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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

*{
    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>

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

老坛酸菜鸡蛋面 2018-04-07

源自：CSS网页布局基础 3-4 双飞翼布局及案例

收起

1回答

Miss路 2018-04-08 13:52:52

你写的很好呀，结构也很清晰，还用到了定位去实现，你觉得代码冗余是因为你做的比较细，做的相对比较完美，代码是否冗余，你可以看看你的css中是否写了很多重复的内容，如果大量重复说明冗余，如果代码不重复，每一行都有作用，那说明是必要的代码。以后写网页样式会越来越多，不要误解了冗余的意思哦。

继续加油！

收起回答

提问者老坛酸菜鸡蛋面 #1

谢谢了，我会再研究研究的。会有这种感觉就是，大体写完之后再加细节就会开始找不到地方，那个在哪里搞得懵懵的。

2018-04-09 21:12:21
Miss路回复提问者老坛酸菜鸡蛋面 #2

感觉懵懵的，是因为你写的少，好多地方都是试出来的，或者是使用了不确定的方法，这些在初学时期是很正常的，多练习就好了。加油！

2018-04-11 11:08:17