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排版与传统的表格方式排版的分析
事实上，现在仍存在大量的使用表格进行布局的页面，我们在书中和视频课程中，也会分析到二者各自的优点和缺点，这样大家就可以根据需要来选择使用那种技术更恰当了。
36,057
我可能笨自学比较吃力！如果LINKS的内容比#contentd的长，方法是都设为左浮动，对于固定宽度是二者同时设置为左浮动或者右浮动，这一节我卡在这里好久了，请老师给我详细的讲一下吧，书上我看不懂，视频中没有详细讲到。
峰峰 ，
这样，你仔细看一下网页右侧《CSS设计彻底研究》的视频，哪里有比较详细的介绍，对这种布局方法将的很详细，可能你看了就更明白了。
汗啊，怎么书越看越看不懂，视频中也说请参考书本晕死啊！那个排版中，magin-left:-200px往左拉回200px，那为什么内容往回挤padding-ringht:200px
峰峰 ，
您在换几个小时时间吧我们网站上另一套视频教程《CSS设计彻底研究》看一遍，相信对您理解基础的概念会有所帮助。特别前几课，讲的是CSS的核心基础原理，一定要先看明白，再看后面的就容易了。
谢谢老师，我会努力学习的
老师，感谢你的讲解，我已经通过你的网站购买了两本书《CSS设计彻底研究(附盘) (1) 以及精通CSS+DIV网页样式与布局 (1) ，我希望得到相关的PPT，先谢过了
老陈，
PPT下载地址：
http://learning.artech.cn/20090312.ppt-download.html
老师，您好，我在我的网页里面也添加了一个向您一样的电子相册，我想知道如果我要实现点击按钮，可以任意添加图片和说明文字，应该如何来实现。是要用到asp的吧。要不然每次添加图片都得要到后台去添加，有点麻烦啊。。。谢谢
yueyue，
是的，你说得这个需要后台程序才可以实现。掌握一些ASP/ASP.net就可以实现了，并不复杂，加油！
温老师：1.我做了一个tab选项面板，在IE6中运行正常，但在firefox里却不出效果，这是为什么啊？
http://wgzx.hynu.cn/daohang/tab.html
2.我做了一个导航条，在IE6中运行正常，但在firefox中却不是想要的效果，这是为什么啊
http://wgzx.hynu.cn/daohang/dh3.html
小唐,
你是自己写的JS代码，各种浏览器对JS的解释，在某些细节是不一样的，因此学习JS的时候，对各种浏览器的贾兼容性是一个很重要的内容。
实际上，对于这种需要，我建议你还是使用现成的JS框架配合，这些框架都是可以应用在各种浏览器上，而无须做额外处理的。因为这些框架把底层的处理工作都替你实现好了。
比如你用Spry或者jQuery来做这些，一般就不会遇到这种问题了。比如jQuery的代码可以兼容于IE 6.0及以上, FF 2 及以上, Safari 2.0及以上, Opera 9.0及以上的所有浏览器,如果你要自己来实现，仅测试就累死了。
哦，那第二个导航条我没有用js呢，纯CSS的
1：先在Firefox中做好，然后再调整适应IE6，会比较容易，反之很困难。
2：底下那条横线最好单独用一个元素，不要用ul的下边框，否则和li混在一起，不好控制。
1、现在我们看到的视频就是《精通DIV+CSS样式与布局》那本书的教学配套光盘还是‘前沿视频教室’自己针对那本事做的视频？
2、我在哪能买到《精通DIV+CSS样式与布局》这本书？
mMm，
1：和光盘中的视频教程内容相同，清晰度低一些。
2：如果您在大城市的话，一般都有一些大书城，里面应该都有卖。否则您可以到网上书店购买，他们的服务不错的。
您可以参考：
http://learning.artech.cn/20070802.css-div-buy-book-online.html 。