深入剖析CSS排版思想及其用法

你对CSS排版的概念是否熟悉，CSS排版是一种很新的排版理念，完全有别于传统的排版习惯。它将页面首先在整体上进行div标记的分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。

网站的建设成都创新互联专注网站定制,经验丰富,不做模板,主营网站定制开发.小程序定制开发,H5页面制作!给你焕然一新的设计体验!已为成都火锅店设计等企业提供专业服务。

CSS排版

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

1．CSS排版观念

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

将页面用div分块

设计各块的位置

用CSS定位

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

宽度固定而且居中的CSS版式是网络中最常见的排版方式之一，我们在这里利用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排版与传统的表格方式排版的分析

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

 【编辑推荐】

1. 详解CSS定位属性Position用法
2. 畅谈DIV排版和table排版的区别
3. 14大CSS工具提高网页设计效率
4. 实现DIV图片居中方法揭秘
5. 鼠标经过时改变DIV背景颜色的三种途径

新闻标题：深入剖析CSS排版思想及其用法
网页网址：http://www.csdahua.cn/qtweb/news7/501557.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网