>  기사  >  웹 프론트엔드  >  Html 网页布局(一)_html/css_WEB-ITnose

Html 网页布局(一)_html/css_WEB-ITnose

WBOY
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으로 문의하세요.