版心
“版心”是指网页中主体内容所在的区域,一般在浏览器窗口中水平居中显示,常见的宽度值为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;
}
.main {
height: 500px;
background-color: hotpink;
}
.footer {
height: 150px;
background-color: black;
}
</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>
左右布局方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.top, /*并集选择器给相同样式集体声明*/
.banner,
.main,
.footer {
width: 960px;
margin: 0 auto;
border: 1px dashed #ccc;
text-align: center;
background-color: #eee;
margin-bottom: 8px;
}
.top {
height: 80px;
}
.banner {
height: 150px;
}
.main {
height: 500px;
}
.left {
width: 360px; /* 孩子的宽度不能大于父亲的宽度*/
height: 500px;
background-color: skyblue;
float: left;
}
.right {
width: 592px;
height: 500px;
background-color: purple;
float: right;
}
.footer {
height: 20px;
}
</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>
通栏平均分布型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0; /*清除内外边距*/
}
ul {
list-style: none;
}
.top {
/*通栏的盒子可以不用写宽度,默认的宽度和浏览器一样宽*/
height: 80px;
border: 1px dashed #aaa;
background-color: #bbb;
text-align: center; /*文字水平居中*/
}
.banner {
width: 960px;
border: 1px dashed #aaa;
background-color: #eee;
height: 150px;
margin: 10px auto;
text-align: center; /*文字水平居中*/
}
.small {
width: 960px;
height: 100px;
margin: 0 auto;
margin-bottom: 10px;
}
.small ul li {
width: 230px;
border: 1px dashed #aaa;
background-color: #eee;
height: 100px;
float: left;
margin-left: 10px;
}
.small .nomargin {
margin-left: 0;
}
.footer {
height: 150px;
border: 1px dashed #aaa;
background-color: #eee;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">广告</div>
<div class="small">
<ul>
<li class="nomargin">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="small">
<ul>
<li class="nomargin">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="small">
<ul>
<li class="nomargin">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>