版心和布局流程
一、版心
版心：是指网页主题内容所在的区域。一般在浏览器窗口水平居中位置，常见的宽度值为960px、980px、1000px、1200px等。
二、布局流程
为了提高网页制作的效率，布局时需要遵守一定的布局流程，具体如下：
- 确定页面版心
- 分析页面中的行模块，以及每个行模块中的列模块
- 制作HTML结构
- CSS初始化，然后开始运用盒子模型的原理，通过CID+CSS布局来控制网页的各个模块
三、一列固定宽度且居中
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
.top,
.banner,
.main,
.footer {
width: 960px;
margin: 10px auto;
text-align: center;
}
.top {
height: 100px;
background-color: pink;
}
.banner {
height: 120px;
background-color: skyblue;
}
.main {
height: 500px;
background-color: red;
}
.footer {
height: 150px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>
四、两列左窄右宽
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
.top,
.banner,
.main,
.footer {
width: 960px;
margin: 10px auto;
text-align: center;
}
.top {
height: 100px;
background-color: pink;
}
.banner {
height: 120px;
background-color: skyblue;
}
.main {
height: 500px;
background-color: red;
}
.footer {
height: 150px;
background-color: #ccc;
}
.main .left {
width: 360px;
height: 500px;
float: left;
background-color: white;
}
.main .right {
width: 590px;
height: 500px;
margin-left: 10px;
float: left;
background-color: white;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
五、通栏平均分布型
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.top,
.banner,
.main,
.footer {
width: 960px;
margin: 10px auto;
text-align: center;
}
.top {
height: 100px;
background-color: pink;
}
.banner {
height: 120px;
background-color: skyblue;
}
.main {
height: 500px;
background-color: red;
}
.footer {
height: 150px;
background-color: #ccc;
}
.main ul li:nth-child(odd) {
width: 240px;
height: 240px;
background-color: deeppink;
float: left;
}
.main ul li:nth-child(even) {
width: 240px;
height: 240px;
background-color: hotpink;
float: left;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>