CSS排版观念
1、将页面用DIV分块
以最简单的框架为例，页面由Banner、主体内容（content）、菜单导航（links）和脚注（footer）几个部分组成。
<html>
<head>
<style type="text/css">
<!--
body {
margin:10px;
text-align:center;
}
#container{
width:800px;
border:1px solid #000000;
padding:10px;
}
#banner{
margin-bottom:5px;
padding:10px;
background-color:#a2d9ff;
border:1px solid #000000;
text-align:center;
}
#content{
float:left;
width:570;
height:300px;
border:1px solid #000000;
text-align:center;
}
#links{
float:right;
width:200px;
height:300px;
border:1px solid #000000;
text-align:center;
}
#footer{
clear:both; /* 不受float影响 */
padding:10px;
border:1px solid #000000;
text-align:center;
}
-->
</style>
<title>CSS排版</title>
<body>
<div id="container">
<div id="banner">banner</div>
<div id="content">content</div>
<div id="links">links</div>
<div id="footer">footer</div>
</div>
</body>
</html>
这样页面的整体框架便搭建好了，这里需要指出的是content块中不能放宽度太长的元素，例如很长的图片或不折行的英文等，否则links将再次被挤到content下方。
特别的，如果后期维护时希望content的位置与links对调，仅仅只需要将content和links属性中的left和right改变。这是传统的排版方式所不可能简单实现的，也正是CSS排版的魅力之一。
另外，如果links的内容比content的长，在IE浏览器上footer就会贴在content下方而与links出现重合。
2、div排版与传统的表格方式排版的分析
利用表格排版的页面在下载时必须等整个表格的内容都下载完毕之后才会一次性显示出来，而利用div块的CSS排版的页面在下载时就科学得多，各个子块可以分别下载显示，从而提高了页面的下载速度，搜索引擎的排名也会因此而提高。
CSS的div排版方式使得数据与CSS文件完全分离，美工在修改页面时不需要关心任何后台操作的问题。而表格排版由于依赖各个单元格，美工必须在大量的后台代码中寻找排版方式。