<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
color:orange;
font-size:16px;
}
body{
min-width:40%;
min-height:40%;
}
.header,.footer{
width:100%;
height:100px;
background:#000;
line-height:100px;
}
.header ul{
float:right;
margin-right:120px;
}
.footer ul{
margin-left:25%;
}
.header ul li,.footer ul li{
float:left;
margin-right:55px;
}
.main{
background:#e4e5e9;
padding:0 382px 0 320px;
overflow:hidden;
}
.main .left{
float:left;
width:320px;
margin-left:-100%;
position:relative;
left:-320px;
}
.main .left .course{
margin:96px 30px;
line-height:30px;
}
.main .left .course h4{
font-size:20px;
}
.main .left .course ul li span{
background:red;
margin-right:5px;
}
.main .left .course ul li a{
display:inline-block;
font-size:14px;
}
.main .left .course h4,.main .left .course ul li span,.main .left .course ul li a,.main .right form h4,.main .right form input{
color:#000;
}
.main .right{
float:left;
width:382px;
position:relative;
margin-left:-382px;
left:382px;
color:#000;
}
.main .center{
width:100%;
float:left;
position:relative;
}
.main .center img{
position:absolute;
top:50%;
margin-top:-200px;
}
.main .right form{
margin:100px 35px;
line-height:30px;
}
.main .right form input{
display:block;
line-height:30px;
margin-top:10px;
width:100%;
height:30px;
}
.main .center{
height:480px;
}
</style>
</head>
<body>
<div class="header">
<img src="http://climg.mukewang.com/590037f600016ce303000100.png">
<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 class="main">
<div class="center">
<img src="http://climg.mukewang.com/590037e00001fab706000400.jpg">
</div>
<div class="left">
<div class="course">
<h4>课程推荐</h4>
<ul>
<li><span>职业路径</span><a href="#">HTML与CSS实现动态网页</a></li>
<li><span>职业路径</span><a href="#">零基础入门Android语法与界面</a></li>
<li><span>职业路径</span><a href="#">iOS基础语法和常用控件</a></li>
<li><span>职业路径</span><a href="#">PHP入门开发</a></li>
<li><span>职业路径</span><a href="#">JAVA入门开发</a></li>
</ul>
</div>
</div>
<div class="right">
<form action="#">
<h4>登录</h4>
<input type="text" placeholder="请输入登录邮箱/手机号" />
<input type="password" placeholder="6-16位密码,区分大小写,不能用空格" />
<input type="submit" style="background:red" value="登录">
</form>
</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>
慕码人9569303