Maison > Article > interface Web > Html 网页布局（一）_html/css_WEB-ITnose
Html 网页布局（一）_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:22:27960parcourir
<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>
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：如何在HTML不同的页面中，共用头部与尾部？_html/css_WEB-ITnoseArticle suivant：专访：《编写高质量代码web前端开发修炼之道》作者@阿当_html/css_WEB-ITnose