<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.head{
width:100%;
height:100px;
background:black;
}
.logo{
width:300px;
height:100px;
line-height:100px;
background:url(http://climg.mukewang.com/58c0d2d900016ce303000100.png);
float:left;
}
.banner ul{
float:right;
}
.banner ul li{
list-style:none;
font:20px "微软雅黑";
color:white;
float:left;
margin-right:60px;
height:100px;
line-height:100px;
cursor: pointer;
}
.container{
height:800px;
font-size:16px;
line-height:50px;
background:skyblue;
overflow: hidden;
zoom:1;
padding:0 250px 0 200px;
}
.left,.middle,.right{
position:relative;
float:left;
}
.left{
width:200px;
margin-left: -100%;
left:-200px;
padding:10% 5%;
height:800px;
}
.middle{
width:100%;
height:800px;
}
.img{
position:relative;
left:10%;
top:5%;
}
.right{
width:250px;
margin-left: -250px;
right:-250px;
padding:10% 5%;
height:800px;
}
.container h3{
font-size:25px;
}
.left p span{
background:pink;
}
input{
width:230px;
height:30px;
}
.landing{
background:red;
border:none;
}
.footer{
width:100%;
height:100px;
background:black;
text-align: center;
}
.footer ul li{
list-style: none;
font:20px "微软雅黑";
color:white;
display:inline-block;
height:100px;
line-height:100px;
margin:0 80px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="head">
<div class="logo">
</div>
<div class="banner">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="container">
<div class="middle">
<img src="http://climg.mukewang.com/590037e00001fab706000400.jpg">
</div>
<div class="left">
<h3>课程推荐</h3>
<p><span>职业路径</span> HTML与CSS3实现动态网页</p>
<p><span>职业路径</span> 零基础入门</p>
<p><span>职业路径</span> ios基础语法</p>
<p><span>职业路径</span> PHP基础入门</p>
<p><span>职业路径</span> JAVA入门开发</p>
</div>
<div class="right">
<h3>登录</h3>
<input type="text" name="username" placeholder="请输入登陆邮箱/手机号"/>
<br/>
<input type="password" name="paw" placeholder="6-16位密码,区分大小写,不能用空格"/>
<br/>
<input type="button" name="landing" value="登录" class="landing"/>
</div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>