Html 网页布局（一） - mokal同学

<ol>
<li><br></li>
<li>
<li>
<li><meta charset="UTF-8"></li>
<li><meta name="decsription" content="一列布局变混合布局"></li>
<li><title>一列布局混合布局</title></li>
<li><style type="text/css"><li>body {<li>	margin: 0;<li>	padding: 0; /*清楚默认样式*/<li>}<li><br><li>.top {<li>	height: 100px;<li>	background: blue;<li>}<li>.nav{height:100px;width:1000px;background:#f60;margin:0 auto;}<li>.main {<li>	width: 800px;<li>	height: 600px;<li>	background: #ccc;<li>	margin: 0 auto;<li>}<li>.left{width:200px;height:600px;background:yellow;float:left;}<li>.right{width:600px;height:600px;background:#369;float:right;}<li>.sub_l{width:400px;height:600px;background:#218;float:left;}<li>.sub_r{width:200px;height:600px;background:green;float:right;}<li>.sub_r_up{width:200px;height:200px;background:#765;}<li>.sub_r_down{width:200px;height:300px;background:red;}<li>.bottom {<li>	width: 800px;<li>	height: 100px;<li>	background: #b0b;<li>	margin: 0 auto;<li>}<li></style></li>
<li>
<li>
<li>	<div class="top">
<li>		<div class="nav"></div>
</li>
<li>	</li>
</div>
</li>
<li>	<div class="main">
<li>		<div class="left"></div>
</li>
<li>		<div class="right">
<li>			<div class="sub_l"></div>
</li>
<li>			<div class="sub_r">
<li>				<div class="sub_r_up"></div>
</li>
<li>				<div class="sub_r_down"></div>
</li>
<li>			</li>
</div>
</li>
<li>		</li>
</div>
</li>
<li>	</li>
</div>
</li>
<li>	<div class="bottom"></div>
</li>
<li>
<li>
</ol>