请老师检查
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.header{
width: 100%;
height: 100px;
line-height: 100px;
background: #000;
overflow: hidden;
zoom: 1;
position: fixed;
top: 0;
}
.header .logo{
width: 300px;
height: 100px;
background: url(http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png) no-repeat;
float: left;
margin-left: 150px;
}
.header .nav{
float: right;
margin-right: 150px;
}
.header .nav ul{
height: 100px;
line-height: 100px;
list-style-type: none;
text-align: center;
}
.header .nav ul li{
display: inline-block;
padding: 0 30px;
color: #ffffff;
font-size: 16px;
}
.main{
width: 1200px;
height: 700px;
margin: 100px auto 0;
overflow: hidden;
zoom: 1;
}
.main .left{
width: 31%;
height: 700px;
padding: 80px 2% 0;
float: left;
}
.main .left h3{
font-size: 18px;
margin-bottom: 14px;
}
.main .left .course{
font-size: 14px;
line-height: 1,5em;
margin-bottom: 10px;
}
.main .left .course span{
background: pink;
margin-right: 10px;
color: #333333;
}
.main .left .course a{
color: #333333;
text-decoration: none;
}
.main .middle{
width: 31%;
height: 700px;
padding: 80px 2% 0;
float: left;
}
.main .middle h3{
font-size: 18px;
margin-bottom: 14px;
}
.label{
margin-bottom: 10px;
}
.label span{
color: #333333;
font-size: 14px;
padding-right: 10px;
}
.main .line{
width: 0.2%;
height: 700px;
background: orange;
float: left;
}
.main .right{
width: 25.8%;
height: 700px;
padding: 80px 2% 0;
float: right;
}
.main .right h3{
font-size: 18px;
margin-bottom: 14px;
display: inline-block;
}
.right .username,.password{
margin-bottom: 15px;
}
.right .username input{
width: 286px;
height: 36px;
line-height: 36px;
background: #ffffff;
border: 1px solid #e8e8e8;
font-size: 14px;
color: #333;
padding-left: 14px;
}
.right .password input{
width: 286px;
height: 36px;
line-height: 36px;
background: #ffffff;
border: 1px solid #e8e8e8;
font-size: 14px;
color: #333;
padding-left: 14px;
}
.right .button{
width: 300px;
height: 36px;
line-height: 36px;
background: red;
font-size: 16px;
color: #fff;
text-align: center;
border-radius: 4px;
}
.footer{
width: 100%;
height: 80px;
line-height: 80px;
background: #000000;
color: #ffffff;
font-size: 14px;
text-align: center;
position: fixed;
bottom: 0;
}
.footer ul{
list-style-type: none;
text-align: center;
}
.footer ul li{
display: inline-block;
margin: 0 35px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="nav">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="main">
<div class="left">
<h3>课程推荐</h3>
<div class="course">
<span>职业路径</span>
<a href="#">HTML5与CSS3实现动态网页</a>
</div>
<div class="course">
<span>职业路径</span>
<a href="#">零基础入门Android语法与开发</a>
</div>
<div class="course">
<span>职业路径</span>
<a href="#">iOS基础语法与常用控件</a>
</div>
<div class="course">
<span>职业路径</span>
<a href="#">PHP入门开发</a>
</div>
<div class="course">
<span>职业路径</span>
<a href="#">JAVA入门开发</a>
</div>
</div>
<div class="middle">
<h3>相关课程</h3>
<div class="label">
<span>HTML5</span><span>CSS3</span><span>JavaScript</span>
</div>
<div class="label">
<span>HTML5</span><span>CSS3</span><span>Jquery</span>
</div>
<div class="label">
<span>移动端基础</span><span>移动端APP开发</span>
</div>
</div>
<div class="line"></div>
<div class="right">
<h3>登录</h3>
<div class="username">
<input type="username" placeholder="请输入登录邮箱/手机号" />
</div>
<div class="password">
<input type="password" placeholder="6-16位密码，区分大小写，不能用空格"/>
</div>
<div class="button">登录</div>
</div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星