Main Content -- Love's not time's fool...
最近有一个读者问到,怎样用CSS创建一个居中的页面布局。该读者所追求的,是要达到这样一种效果,就如同在一个1024象素宽的页面上设计出一个800象素宽的表格。这是一种使用很广泛的页面设计方法,按照传统,它要靠嵌套表格才能达到这一效果,因此,这位读者追寻一种用CSS来达到这一效果的方法并不让人惊讶。 用CSS来创建一个居中的页面设计的基本技术相对来说较简单,不过与同类相比,也简单不了太多。让我们看一下,要将这种由来已久的基于表格的设计转变成用CSS,该怎样做。 传统的做法:居中的布局 首先,由于是做比较,让我们来看一个例子,它是一种基于一个居中表格的页面设计。图表A中显示了一个例子,以下是这个例子的编码:
< table >这个标签包括了以下一些属性,将其宽度定义为页面宽度的80%,并将该表格置于页面的中间。在表格的前面有一个空白段落,这就使得页面的顶端与表格的顶端之间有一些垂直空间。在表格的后面也有一个空白段落,这就使得页面的底端与表格的底端之间也有一些空间。这个表格包括两列三行。顶端的单元被合并了,用来放置页眉,底端的行也合并了,以安置页脚,而中间那些单元则被分为两列,一个供放置主要内容,另一个则是导航工具栏。 这是一个简单的例子,诠释的是一种多年以来广为人们使用的技术。在现今的那些应用软件中,有代表性的主要种包含了嵌套表格,用以创建一种复杂得多的版面设计,不过,它的复杂性虽然被人为加大了,它所采用的基本技术却并没有改变。 将居中的设计转换成使用CSS 要想将这种传统的基于表格的版面设计转换成用CSS,你只要用divs来代替那些表格和表格单元就行了。一个div取代表格本身,另一个取代那些单个的表格单元,这些单个的表格单元定义了主要的版面设计元素,诸如标题,页脚,导航工栏,以及主要内容。每个div都有一个id,且它们的id都是独一无二的,你可以用一个CSS选择器来让它们创建各自不同的样式,每一种样式对应于div中的一种,这种对应关系依据id而建立。那个取代表格的div被标上了id=外部,其它那些div则靠他们各自的功能来鉴别。 这是已校订过的用div代替表格的XHTML的编码: HeaderMain Content -- Love's not time's fool... 注意一下所有那些陈述的格式,原来它们被包括在
最新评论|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 ) GMT+8, 2024-9-30 05:37 , Processed in 0.379732 second(s), 12 queries , Gzip On, MemCache On. Powered by Discuz! X3.5 © 2001-2023 Discuz! Team. |