<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0; }
.header{background:black;width:100%;height:100px;min-width:900px;}
.header-1{float:left;}
.header-2{float:right;}
.header ul li{display:inline;}
.contin{padding:0 180px 0 220px;height:700px;}
.middle{width:100%;height:700px;background:pink;position:relative;float:left;min-width:500px;}
.middle img{width:400px;height:500px;position:absolute;top:50%;left:50%;margin-top:-250px;margin-left:-200px;}
.left{float:left;background:yellow;height:700px;width:300px;position:relative;left:-220px;margin-left:-100%;text-align:center;}
.left-1{height:120px;position:relative;top:20%;}
.left-1 h2{position:relative;left:-50px;}
.right{float:left;background:blue;width:180px;height:700px;position:relative;right:-180px;margin-left:-180px;text-align:center;}
.right div{position:relative;top:120px;}
span{background:pink;}
.left ul li{margin-left:3px;margin-bottom:25px;list-style-type:none;}
input{width:150px;height:40px;margin-top:20px;}
.d22{background:red;}
.right_1text h2{position:relative;left:-50px;}
.footer{background:green;width:100%;height:100px;text-align:center;}
.footer ul li{display:inline-block;line-height:100px;}
.footer ul li a{text-decoration:none; }
/*此处写代码*/
</style>
</head>
<body>
<div class="header">
<div class="header-1"><img src="http://climg.mukewang.com/590037f600016ce303000100.png" /></div>
<div class="header-2">
<ul>
<li>手记</li>
<li>猿问</li>
<li>实战</li>
<li>职业路径</li>
<li>课程</li>
</ul>
</div>
</div>
<div class="contin">
<div class="middle">
<img src="http://climg.mukewang.com/590037e00001fab706000400.jpg">
</div>
<div class="left">
<div class="left-1">
<h2>课程推荐</h2>
<ul>
<li><span>职业路径</span>HTML5和CSS3实现动态网页</li>
<li><span>职业路径</span>HTML5和CSS3实现动态网页</li>
<li><span>职业路径</span>HTML5和CSS3实现动态网页</li>
<li><span>职业路径</span>HTML5和CSS3实现动态网页</li>
<li><span>职业路径</span>HTML5和CSS3实现动态网页</li>
</ul>
</div>
</div>
<div class="right">
<div class="right_1text">
<h2>登录</h2>
<form>
<input type="text" name="user" placeholder="请输入登录邮箱/手机号" /><br/>
<input type="password" name="pass" placeholder="6-16位密码,区分大小写,不能有空格" /><br/>
<input type="button" value="登录" class="d22"/>
</form>
</div>
</div>
</div>
<div class="footer">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">企业合作</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">练习我们</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">友情链接</a></li>
</ul>
</div>
<!-- 此处写代码 -->
</body>
</html>