| 用CSS创建一个布局居中的页面 |
|
| 日期：2007-6-20 9:33:37 人气：77 [大 中 小] |
|
|
|
|
|
|
id="fontzoom"> 最近有一个读者问到，怎样用CSS创建一个居中的页面布局。该读者所追求的，是要达到这样一种效果，就如同在一个1024象素宽的页面上设计出一个800象素宽的表格。这是一种使用很广泛的页面设计方法，按照传统，它要靠嵌套表格才能达到这一效果，因此，这位读者追寻一种用CSS来达到这一效果的方法并不让人惊讶。
用CSS来创建一个居中的页面设计的基本技术相对来说较简单，不过与同类相比，也简单不了太多。让我们看一下，要将这种由来已久的基于表格的设计转变成用CSS，该怎样做。
传统的做法：居中的布局
首先，由于是做比较，让我们来看一个例子，它是一种基于一个居中表格的页面设计。图表A中显示了一个例子，以下是这个例子的编码：
<body>
<p> </p>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="10"bgcolor="#FFFFFF">
<tr>
<td colspan="2"><h2 align="center">Header</h2></td>
</tr>
<tr>
<td width="150px" valign="top"><h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</td>
<td valign="top"><p>Main Content -- Love's not
time's fool...</p></td>
</tr>
<tr>
<td colspan="2"><hr />
<p>Footer text -- Admit impediments...</p>
</td>
</tr>
</table>
<p> </p>
</body>
< table >这个标签包括了以下一些属性，将其宽度定义为页面宽度的80%，并将该表格置于页面的中间。在表格的前面有一个空白段落，这就使得页面的顶端与表格的顶端之间有一些垂直空间。在表格的后面也有一个空白段落，这就使得页面的底端与表格的底端之间也有一些空间。这个表格包括两列三行。顶端的单元被合并了，用来放置页眉，底端的行也合并了，以安置页脚，而中间那些单元则被分为两列，一个供放置主要内容，另一个则是导航工具栏。
这是一个简单的例子，诠释的是一种多年以来广为人们使用的技术。在现今的那些应用软件中，有代表性的主要种包含了嵌套表格，用以创建一种复杂得多的版面设计，不过，它的复杂性虽然被人为加大了，它所采用的基本技术却并没有改变。
将居中的设计转换成使用CSS
要想将这种传统的基于表格的版面设计转换成用CSS，你只要用divs来代替那些表格和表格单元就行了。一个div取代表格本身，另一个取代那些单个的表格单元，这些单个的表格单元定义了主要的版面设计元素，诸如标题，页脚，导航工栏，以及主要内容。每个div都有一个id,且它们的id都是独一无二的，你可以用一个CSS选择器来让它们创建各自不同的样式，每一种样式对应于div中的一种，这种对应关系依据id而建立。那个取代表格的div被标上了id=外部，其它那些div则靠他们各自的功能来鉴别。
这是已校订过的用div代替表格的XHTML的编码：
<body>
<div id="outer">
<div id="header">
<h2>Header</h2> |
|
|
| 出处：本站原创 作者：佚名 |
|
|
