实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
body{margin: 0;padding: 0;}
.nav{
width:100%;
background: #2c73fa;
height: 40px;
}
.header{
width: 1000px;
margin: 0px auto;
}
.header ul{
margin: 0px;
padding: 0px;
list-style: none;
}
.header ul li{
list-style-type: none;
}
.header ul li a{
color:#fff;
text-decoration:none;
font-size:16px;
line-height:40px;
float: left;
text-align: center;
width: 200px;
}
.header ul li a:hover{
background:#f60;
}
.content{
width: 600px;
height: 500px;
margin: 5px auto;
background: #ccc;
}
.content p{
margin: 0px;
color:#fff;
font-size: 16px;
line-height: 500px;
text-align: center;
}
.mail{
width: inherit;
min-height: 500px;
background: #2c73fa;
}
.left{
width: 200px;
height: 500px;
background: orange;
margin-left: -100%;
position: relative;
left:-200px;
}
.right{
width: 200px;
height: 500px;
background: orange;
margin-left: -200px;
position: relative;
left:200px;
}
.mail,.left,.right{
float: left;
}
.footer{
width: 100%;
background:#000;
}
.footer .foot{
width: 1000px;
height: 100px;
margin: 0px auto;
}
.footer .foot p{
margin: 0;
text-align: center;
padding: 10px;
color: #fff;
}
.footer .foot p a{
color: #fff;
font-size: 14px;
text-decoration: none;
}
.footer .foot p a:hover{
color:#f60;
}
</style>
</head>
<body>
<div class="nav">
<div class="header">
<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 class="content">
<div class="mail"><p>主体部分</p></div>
<div class="left"><p>左侧部分</p></div>
<div class="right"><p>右侧部分</p></div>
</div>
<div class="footer">
<div class="foot">
<p><a href="">关于我们</a> | <a href="">联系我们</a> | <a href="">产品分类</a> | </p>
<p>XXXX公司版权所有 沪ICP备：888888888</p>
</div>
</div>
</body>
</html>运行实例 »
根据老师所讲知识，完成圣杯布局。
