CSS 版心和布局
2018-12-08 本文已影响280人
roy_pub
版心（可视区）指网页中的主体内容区域。一般在浏览器中居中显示，显示宽度常见960px,980px,1000px,1200px等。
布局流程
- 确定页面版心
- 分析页面中的行模块，以及每一个行模块中的列模块
- 制作HTML结构
- CSS初始化，然后通过盒子模型远离，通过DIV+CSS布局来控制网页每个模块
一列固定宽度且居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
width: 960px;
margin: 0 auto;
}
.top, .banner, .main, .footer {
background-color: cyan;
}
.top {
height: 80px;
}
.banner {
height: 120px;
margin: 10px auto;
}
.main {
height: 300px;
margin: 10px auto;
}
.footer {
height: 80px;
}
</style>
</head>
<body>
<div class="container">
<!-- .top+.banner+.main+.footer 快捷方式 -->
<div class="top"></div>
<div class="banner"></div>
<div class="main"></div>
<div class="footer"></div>
</div>
</body>
</html>
左右型结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
width: 960px;
margin: 0 auto;
}
.top, .banner, .left, .right, .footer {
background-color: cyan;
}
.top {
height: 80px;
}
.banner {
height: 120px;
margin: 10px auto;
}
.main {
height: 300px;
margin: 10px auto;
}
.left {
float: left;
width: 240px;
height: 300px;
}
.right {
float: right;
width: 700px;
height: 300px;
}
.footer {
height: 80px;
}
</style>
</head>
<body>
<div class="container">
<!--.top+.banner+(.main>.left+.right)+.footer-->
<div class="top"></div>
<div class="banner"></div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
通栏平均分布型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.top {
background-color: cyan;
width: 100%;
height: 80px;
}
.top-inner {
background-color: grey;
width: 960px;
height: 80px;
margin: 0 auto;
}
.container {
width: 960px;
margin: 0 auto;
}
.banner {
background-color: cyan;
height: 120px;
margin: 10px auto;
}
.ad {
width: 960px;
height: 200px;
background-color: darkseagreen;
}
.ad li {
float: left;
width: 225px;
height: 200px;
margin-right: 20px;
}
.ad .one {
background-color: orange;
}
.ad .two {
background-color: pink;
}
.ad .three {
background-color: palegreen;
}
.ad .four {
background-color: purple;
margin-right: 0;
}
.footer {
background-color: cyan;
height: 80px;
}
</style>
</head>
<body>
<div class="top">
<div class="top-inner"></div>
</div>
<div class="container">
<div class="banner"></div>
<div class="ad">
<ul>
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
<li class="four"></li>
</ul>
</div>
</div>
<div class="footer"></div>
</body>
</html>
