页面布局是指网页中各种元素的排版结构。
页面布局的技术包括表格、Div、框架等技术，目前较为常用的是CSS+Div来控制页面布局。
1. 网页基本组成
- 页头包含网站的logo 和用于说明网站或做宣传广告的banner 部分构成。
- 导航有水平导航和竖排导航。
- 内容部分主要是网页的基本内容。
- 页脚一般放置公司信息和版权信息等。
2. 网页大小
- 网页除了显示网页内容外，还显示浏览器的的边框；
- 除去浏览器边框，在1024×768分辨率的显示器里，网页能显示的区域大约为1004×613像素，在800×600分辨率的显示器里，网页能显示的区域大约为780×445 像素。
- 在1024×768分辨率下，网页的宽度可以设置为1004像素，而网页的高度可以适量地增加，但也不应太大，最好不超过三屏，即不要超过1800 像素。
3. 单列布局
根据列的宽度单位不同可分为：
- 固定宽度布局：浏览器窗口变化时，网页宽度不会随着改变，因此使用Div布局时，要设置最外层的Div宽度单位为像素，具体数值视分辨率而定，然后让该Div居中显示。
- 单列变宽布局：设置Div的宽度单位为百分比，网页宽度会随着浏览器窗口大小的改变而改变。
- 两列变宽布局：两列都随着网页宽度变化而变化。
代码例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>单列固定宽度布局</title>
<style>
body {
margin: 0;
padding: 0;
font-size: 30px
}
header,
section,
footer {
text-align: center;
/*文本居中*/
font-weight: bold;
width: 960px;
/*固定宽度*/
/*width: 80%; 自适应宽度*/
margin: 0 auto;
/*浏览器让元素居中对齐*/
}
header {
height: 100px;
background: #ccc
}
section {
height: 600px;
background: #FCC
}
footer {
height: 50px;
background: #9CF
}
</style>
</head>
<body>
<header>head</header>
<section>main</section>
<footer>footer</footer>
</body>
</html>
4. 两列布局
使用绝对定位或浮动属性实现两个Div水平排列，并将它们放在一个大的Div中。
代码例子：
<head>
<meta charset="utf-8">
<title>两列固定宽度布局</title>
<style>
body {
margin: 0;
padding: 0;
font-size: 30px;
font-weight: bold;
}
section,
div {
text-align: center;
line-height: 50px;
}
section {
width: 960px;
height: 600px;
margin: 0 auto;
}
.left {
width: 300px;
height: 600px;
background: #ccc;
float: left;
/*向左浮动*/
}
.right {
width: 660px;
height: 600px;
background: #FCC;
float: right;
/*向右浮动*/
}
</style>
</head>
<body>
<section>
<div class="left">left</div>
<div class="right">right</div>
</section>
</body>
两列变宽布局
等比变宽：浏览器窗口大小改变时，中间的两个div块都会按照一定比例随着改变。
单列变宽：中间部分的一个div大小不变，另一个div块按照一定比例随浏览器大小改变。
代码例子：
浮动实现两列变宽布局：
<head>
<meta charset="utf-8">
<title>浮动实现两列变宽布局</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 30px;
font-weight: bold;
}
section,
div {
text-align: center;
line-height: 50px;
}
section {
width: 80%;
height: 600px;
margin: 0 auto;
}
.left {
width: 20%;
height: 600px;
background: #ccc;
float: left;
/*左浮动样式*/
}
.right {
height: 80%;
background: #FCC;
height: 600px;
}
</style>
</head>
<body>
<section>
<div class="left">left</div>
<div class="right">right</div>
</section>
</body>
绝对定位实现两列变宽布局：
<head>
<meta charset="utf-8">
<title>绝对定位实现两列变宽布局</title>
<style>
body {
margin: 0;
padding: 0;
font-size: 30px;
font-weight: bold;
}
section,
div {
text-align: center;
line-height: 50px;
}
section {
width: 80%;
height: 600px;
margin: 0 auto;
position: relative;
}
.left {
width: 200px;
height: 600px;
background: #ccc;
/*用绝对定位将其停靠在浏览器的左侧*/
position: absolute;
left: 0;
top: 0;
}
.right {
height: 600px;
background: #FCC;
/*设置左边距为210px*/
margin: 0 0 0 210px;
}
</style>
</head>
<body>
<section>
<div class="left">left</div>
<div class="right">right</div>
</section>
</body>
5. 三列布局
- 三列固定宽度布局
- 三列自适应布局：三列宽度都是可变的，只需将左侧和右侧两列的宽度设置为百分比为单位，中间列宽度自适应。
- 左右固定宽度中间变宽布局：只需将左侧和右侧固定的两列的宽度设置为固定值即可。
- 固定值
代码例子：
三列自适应布局：
<html>
<head>
<meta charset="utf-8">
<title>三列自适应布局</title>
<style>
body {
margin: 0;
padding: 0;
font-size: 30px;
font-weight: bold;
}
div {
text-align: center;
line-height: 50px;
}
.left {
width: 20%;
height: 600px;
background: #ccc;
position: absolute;
left: 0;
top: 0;
}
.main {
height: 600px;
margin: 0 20%;
background: #9CF;
}
.right {
height: 600px;
width: 20%;
background: #FCC;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</body>
</html>
