<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Advanced CSS Layout</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
* { margin: 0; padding: 0; }
.c { clear: both; }
/* 容器 */
.page { width: 960px;/* 变量 */ margin: 0 auto; }
.head { height: 60px;/* 变量 */ background-color: #9acd32; }
.foot { height: 80px;/* 变量 */ background-color: #60A179; }
.left { float: left; width: 100px;/* 变量 */ background-color: #ff69b4; }
.right { float: right; width: 120px;/* 变量 */ background-color: #e9967a; }
/* not IE6 */
.center { padding-left: 100px;/* 变量(同.left[width]) */ padding-right: 120px;/* 变量(同.right[width]) */ }
/* IE 6 hack*/
.center { _display:inline; _zoom:1; _margin-left:-3px; _margin-right:-3px; _padding-left: 0; _padding-right: 0; }
.main { background-color: #fffacd; width: 100%;}
</style>
</head>
<body>
<div class="page">
<div class="head">head</div>
<div class="middle">
<div class="left">
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
</div>
<div class="center">
<div class="main">
<p>这里可以放任何物体</p>
<p>这里可以放任何物体</p>
<p>这里可以放任何物体</p>
<p>这里可以放任何物体</p>
<p>这里可以放任何物体</p>
<p>这里可以放任何物体</p>
<p>这里可以放任何物体</p>
<p>这里可以放任何物体</p>
</div>
</div>
<div class="c"></div>
</div>
<div class="foot">foot</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
