Html 网页布局（一）_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:22:27957검색
<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>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.