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>32
收起
正在回答
1回答
测试了你的代码，效果实现的很好，每个人的编码思维和编码逻辑不一样，因此实现的代码也不一样，只要能够实现效果且没有冗佘的代码即可！希望可以帮到你！
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星