其实，在网页制作中，页面上的元素就是块与块之间的关系，他们存在着三种状态：块挨着块，块嵌套着块，块叠压着块。通过css将这些块摆放正确，网页中的布局也自然就会完美了！
一、网页的一列布局：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title><!-- 显示网页标题，若title标签为空，则显示文件名。 -->
<meta charset="utf-8"><!-- 用来在HTML文档中模拟HTTP协议的响应头报文。 -->
<style type="text/css">
body{margin: 0;padding: 0;float: 0;}/*清除默认样式*/
.top{text-align: center;height: 100px;background: blue;}
.main{text-align: center; width: 800px;height: 300px;background:#ccc; margin: 0 auto;}/*上下为0，左右为auto，使其居中*/
.foot{text-align: center; width: 800px;height: 100px;background:green;margin: 0 auto;}
</style>
</head>
<body>
<div class="top">1</div>
<div class="main">2</div>
<div class="foot">3</div>
</body>
</html>
浏览器中显示效果：
二、网页的三列布局：
两边div固定，中间div自适应：（可变换成多列，举一反三）
<!DOCTYPE html>
<html>
<head>
<title>排版布局</title><!-- 显示网页标题，若title标签为空，则显示文件名。 -->
<meta charset="utf-8"><!-- 用来在HTML文档中模拟HTTP协议的响应头报文。 -->
<style type="text/css">
body{margin: 0;padding: 0;}/*清除默认样式*/
.left{text-align:center;width: 200px;height: 900px;background:blue;position: absolute;left: 0;top: 0;}
.middle{height: 900px;background:pink;margin: 0 300px 0 200px;/*上右下左顺时针，距离右边300，左边200，可调节使之产生间距*/}
.right{text-align:center;width: 300px;height: 900px;background:blue;position: absolute;right: 0;top: 0;}/*左右固定，中间自适应*/
</style>
</head>
<body>
<div class="left">1</div>
<div class="middle">2设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，我们可以领会要点，举一反三。</div>
<div class="right">3</div>
</body>
</html>
浏览器中显示效果：
三、网页的混合布局：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title><!-- 显示网页标题，若title标签为空，则显示文件名。 -->
<meta charset="utf-8"><!-- 用来在HTML文档中模拟HTTP协议的响应头报文。 -->
<style type="text/css">
body{margin: 0;padding: 0;float: 0;}/*清除默认样式*/
.top{text-align: center;height: 100px;background: blue;}
.main{width: 800px;height: 600px;background:#ccc; margin: 0 auto;}/*上下为0，左右为auto，使其居中*/
.left{text-align: center;width: 200px;height: 600px;background:pink;float: left;}
.right{width: 600px;height: 600px;background:#ccc;float: right;}
.r_top{text-align: center;width: 600px;height: 200px;background:yellow;float: top;}
.r_foot{text-align: center;width: 600px;height: 400px;background:red;float:bottom;}
.foot{text-align: center; width: 800px;height: 100px;background:green;margin: 0 auto;}
</style>
</head>
<body>
<div class="top">1</div>
<div class="main">
<div class="left">2
</div>
<div class="right">
<div class="r_top">3</div>
<div class="r_foot">4</div>
</div>
</div>
<div class="foot">5</div>
</body>
</html>