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

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

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排版的方法。其中幻灯片模式的最终效果如左图所示,详细信息模式的最终效果如右图所示。

CSS排版之电子相册效果     CSS排版之电子相册效果

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

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

  • 匿名
    2015-09-15匿名
    学习了
  • 匿名
    2015-09-15匿名
    http://3gfk1.029jsw.com
  • 匿名
    2015-09-15匿名
    3gfk.029jsw.com
  • 匿名
    2015-09-15匿名
    哇哈哈!~
1
您的回应...

也许你感兴趣

换一批

热门标签

更多