Home >Web Front-end >HTML Tutorial >Html 网页布局（一）_html/css_WEB-ITnose
Html 网页布局（一）_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:22:27977browse
<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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：如何在HTML不同的页面中，共用头部与尾部？_html/css_WEB-ITnoseNext article：专访：《编写高质量代码web前端开发修炼之道》作者@阿当_html/css_WEB-ITnose