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