标签：宽度 pre 水平 流程 red 区域 border style strong
阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。
“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。
为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：
1、确定页面的版心（可视区）。
2、分析页面中的行模块，以及每个行模块中的列模块。
3、制作HTML结构 。
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
2.1 一列固定宽度且居中型
最普通的，最为常用的结构
HTML代码：
<div class="doc"> <div class="top"></div> <div class="banner"></div> <div class="main"></div> <div class="footer"></div> </div>
CSS代码：
.doc{ width: 80%; background-color: #ECEBEE; margin: 0 auto; } .top{ height: 100px; background-color: yellow; } .banner{ height: 40px; background-color: blue; } .main{ height: 500px; background-color: green; } .footer{ height: 200px; background-color: grey; }
2.2 两列左窄右宽型
HTML代码：
<div class="doc"> <div class="top"></div> <div class="banner"></div> <div class="main"> <div class="main_left clear"></div> <div class="main_right clear"></div> </div> <div class="footer"></div> </div>
CSS代码：
.doc{ width: 80%; background-color: #ECEBEE; margin: 0 auto; } .clear { clear: both; float: none; height: 0; overflow: hidden } .top{ height: 100px; background-color: yellow; } .banner{ height: 40px; background-color: blue; } .main{ height: 500px; background-color: green; } .main_left{ float: left; height: 500px; width: 35%; background-color: #1CAEE8; } .main_right{ float: right; height: 500px; width: 65%; background-color: ##ACF341; } .footer{ height: 200px; background-color: grey; }
2.3 通栏平均分布型
HTML代码
<div class="doc"> <div class="top"></div> <div class="banner inner"></div> <div class="main inner clear"> <div class="main_list"></div> <div class="main_list"></div> <div class="main_list"></div> <div class="main_list"></div> </div> <div class="footer"></div> </div>
CSS代码
.doc{
width: 100%;
background-color: #ECEBEE;
margin: 0 auto;
}
.inner{
width: 80%;
margin: 0 auto;
}
.clear {
clear: both;
float: none;
height: 0;
overflow: hidden
}
.top{
height: 100px;
background-color: yellow;
}
.banner{
height: 60px;
background-color: blue;
}
.main{
height: 500px;
background-color: green;
}
.main_list{
float: left;
height: 500px;
width: 24%;
background-color: #1CAEE8;
border: 2px solid red;
}
.footer{
height: 200px;
background-color: grey;
}
标签：宽度 pre 水平 流程 red 区域 border style strong
原文地址：https://www.cnblogs.com/fanbao/p/10503974.html
