版心
“版心”是指网页中主体内容所在的区域,一般在浏览器窗口中水平居中显示,常见的宽度值为960px、980px、1000px、1200px等。
布局流程
为了提高网页制作的效率,布局时通常需要遵守一定的布局流程,如下:
1.确定页面的版心(可视区)
2.分析页面中的行模块,以及每个行模块中的列模块
2.制作HTML页面,css文件
4.css初始化,然后开始运用盒子模型的原理,通过DIV+CSS布局来控制网页的各个板块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0; /*清除内外边距*/
}
/*相同的样式,我们会想到 并集选择器 */
.top,
.banner,
.main,
.foooter {
width: 960px;
text-align: center; /*文字居中对齐 只要保证左右auto即可*/
margin: 0 auto; /*在上*/
margin-bottom: 10px; /*在下*/
border: 1px dashed #ccc;
}
.top {
height: 80px;
background-color: pink;
}
.banner {
height: 120px;
background-color: purple;
}
.ma