当前位置:首页 > DIV+CSS教程 > 正文

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

作者:曾顺 来源:前沿视频教室 【 】 浏览: 添加日期:2008-06-26 我要评论(4)     

点击在线观看

下载该节视频教程 动力软件园分流下载 FLV播放器下载 或者使用QQ影音播放

上一课中主要讲解了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排版与传统的表格方式排版的分析

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

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS教程〗Tags: 视频 css排版

所属专题:视频教程

更多评论(4)..会员评论

binxu1988(222.222.*.*) 发表于:2014-05-22 10:17:43
视频怎么看不了呢
liudehua(218.29.*.*) 发表于:2011-06-04 11:36:12
真是厉害!
丫头_珊(219.238.*.*) 发表于:2010-01-28 17:34:57
哈哈~这个网站真的很好!!!真的很好~~~谢站长~
管理员回复:不客气
木头人(124.162.*.*) 发表于:2010-01-17 20:30:39
永远支持你啊!!!!!!!!,大家顶啊
管理员回复:俺也顶下
爱AA25(123.180.*.*) 发表于:2009-11-11 15:31:33
站长,支持你。爱死你算了。真的爱死你了

出差旅游免费预订酒店

【视频教程】新手常见问题