CSS排版 - CSS/DIV布局专题讲解 - 第8课

本节课时长15分22秒，下载文件17.2兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。

上一课中主要讲解了CSS对页面中各个元素的定位，本课在此基础上，从页面的整体排版出发，介绍CSS排版的观念和具体方法，包括CSS排版的整体思路、两种具体的排版结构、电子相册的几种版式制作，以及与传统表格排版方法的比较。

1．CSS排版观念

CSS的排版是一种很新的排版理念，完全有别于传统的排版习惯。它将页面首先在整体上进行 div 标记的分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。通过CSS排版的页面，更新十分的容易，甚至是页面的拓扑结构，都可以通过修改CSS属性来重新定位。我们在这里主要介绍CSS排版的整体思路，为后续课程的进一步介绍打下基础。希望大家能够掌握以下几个方面的内容：

• 将页面用div分块
• 设计各块的位置
• 用CSS定位

2．固定宽度且居中的版式

宽度固定而且居中的版式是网络中最常见的排版方式之一，我们在这里利用CSS排版的方式制作这种通用的结构，并采用两种方法分别予以实现。
首先像上一节描述的一样，将所有页面内容用一个的大 div 包裹起来，指定该 div 的id为container，这个id在整个页面中是唯一的。虽然大部分浏览器并不限制重复id的使用，但非常不建议同一个页面中出现重复id，因为重复id会使得javascript等脚本语言在寻找对象时发生混乱。

3．左中右版式

将页面分割为左中右三块也是网上常见的一种排版模式，我们在这里以此结构为例巩固CSS排版的方法，页面结构如图所示。

4．块的背景色问题

在前面提到的页面左中右的结构，虽然在整体上将页面进行了排版，但细节处理仍然有不足之处。如果给#left、#middle、#right都设置背景颜色就会发现，仅仅按照上例中的设置，#left、#right的背景都没有延伸到页面的底端，而是仅仅覆盖了内容的部分。

这种背景颜色的问题在CSS排版中经常会遇到，我们在这里给出通用的解决办法，首先按照上节中最后一段代码的方式将中间三块放入一个父块#mainbox中，然后同样把页面中所有的块放入到一个大的父块#container中。

5．排版实例：电子相册

当你出去旅游时拍的很多照片，希望放在网上与朋友分享时；当新闻工作者、摄影家拍了很多相片希望放到网上出售时，电子相册都必不可少。我们在这里通过CSS对电子相册的排版，并且分幻灯片、详细信息两种模式，进一步介绍CSS排版的方法。其中幻灯片模式的最终效果如左图所示，详细信息模式的最终效果如右图所示。

6．DIV排版与传统的表格方式排版的分析

事实上，现在仍存在大量的使用表格进行布局的页面，我们在书中和视频课程中，也会分析到二者各自的优点和缺点，这样大家就可以根据需要来选择使用那种技术更恰当了。