页面布局是指网页中各种元素的排版结构。
页面布局的技术包括表格、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>

CSS页面布局（CSS+Div）