首页  >  文章  >  web前端  >  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