<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding=0;margin=0}
body{min-width:900px;}
#hd{background-color:black;width:100%;height:80px;position: relative;}
#hd .logo{float:left;margin:10px 0 10px 10px;}
#hd .logo img{height:60px;width:200px;}
#hd .nav{float:right;margin:0 auto;}
#hd .nav li{float:left;padding-right:20px; color:white; list-style:none}
#hd .nav ul li hover:{color:orange;}
a:link,a:visited{color:#eee;text-decoration:none;}
a:hover{color:orange;}
#content{float:left;height:1000px;position:relative;}
#content .middle{width:100%;height:1000px;background-color:pink;}
#content .middle img{height:100px;width:100px;}
#content .left{width:220px;height:1000px;margin-left:-100%;left:-220px;background-color:yellow;}
#content .left div h1{padding-bottom:30px;}
#content .left div p{padding-top:20px}
#content .left div span{color:pink}
#content .right{width:200px;height:1000px;margin-left:-100%;right:-200px;background-color:blue}
#footer{background:black;color:white;height:80px;width:100%;float:left;text-align: center;line-height: 80px}
</style>
</head>
<body>
<!--头部-->
<div id="hd">
<div class="logo"><img src="http://climg.mukewang.com/590037f600016ce303000100.png"></div>
<div class="nav">
<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>
</ul>
</div>
</div>
<!--内容-->
<div id="content">
<div class="middle">
<img src="http://climg.mukewang.com/590037e00001fab706000400.jpg"
</div>
<div class="left">
<div>
<h1>课程推荐</h1>
<p><span>职业路径</span> HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span> 零基础入门Android语法与界面</p>
<p><span>职业路径</span> ios基础语法与常用控件</p>
<p><span>职业路径</span> PHP入门开发</p>
<p><span>职业路径</span> JAVA入门开发</p>
</div>
</div>
<div class="right">
<div>
<h1>登录</h1>
<input type="" name="" placeholder="请输入登录账号/手机号">
<input type="" name="" placeholder="6-16位密码区分大小写不能有空格">
<button>登录</button>
</div>
</div>
</div>
<!--页脚-->
<div id="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>
尼称已占用