用CSS創(chuàng)建一個(gè)布局居中的頁(yè)面
發(fā)表時(shí)間：2024-05-19 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]最近有一個(gè)讀者問(wèn)到，怎樣用CSS創(chuàng)建一個(gè)居中的頁(yè)面布局。該讀者所追求的，是要達(dá)到這樣一種效果，就如同在一個(gè)1024象素寬的頁(yè)面上設(shè)計(jì)出一個(gè)800象素寬的表格。這是一種使用很廣泛的頁(yè)面設(shè)計(jì)方法，按照傳統(tǒng)，它要靠嵌套表格才能達(dá)到這一效果，因此，這位讀者追尋一種用CSS來(lái)達(dá)到這一效果的方法并不讓人驚訝。...
最近有一個(gè)讀者問(wèn)到，怎樣用CSS創(chuàng)建一個(gè)居中的頁(yè)面布局。該讀者所追求的，是要達(dá)到這樣一種效果，就如同在一個(gè)1024象素寬的頁(yè)面上設(shè)計(jì)出一個(gè)800象素寬的表格。這是一種使用很廣泛的頁(yè)面設(shè)計(jì)方法，按照傳統(tǒng)，它要靠嵌套表格才能達(dá)到這一效果，因此，這位讀者追尋一種用CSS來(lái)達(dá)到這一效果的方法并不讓人驚訝。
用CSS來(lái)創(chuàng)建一個(gè)居中的頁(yè)面設(shè)計(jì)的基本技術(shù)相對(duì)來(lái)說(shuō)較簡(jiǎn)單，不過(guò)與同類相比，也簡(jiǎn)單不了太多。讓我們看一下，要將這種由來(lái)已久的基于表格的設(shè)計(jì)轉(zhuǎn)變成用CSS，該怎樣做。
傳統(tǒng)的做法：居中的布局
首先，由于是做比較，讓我們來(lái)看一個(gè)例子，它是一種基于一個(gè)居中表格的頁(yè)面設(shè)計(jì)。圖表A中顯示了一個(gè)例子，以下是這個(gè)例子的編碼：
<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 >這個(gè)標(biāo)簽包括了以下一些屬性，將其寬度定義為頁(yè)面寬度的80%，并將該表格置于頁(yè)面的中間。在表格的前面有一個(gè)空白段落，這就使得頁(yè)面的頂端與表格的頂端之間有一些垂直空間。在表格的后面也有一個(gè)空白段落，這就使得頁(yè)面的底端與表格的底端之間也有一些空間。這個(gè)表格包括兩列三行。頂端的單元被合并了，用來(lái)放置頁(yè)眉，底端的行也合并了，以安置頁(yè)腳，而中間那些單元?jiǎng)t被分為兩列，一個(gè)供放置主要內(nèi)容，另一個(gè)則是導(dǎo)航工具欄。
這是一個(gè)簡(jiǎn)單的例子，詮釋的是一種多年以來(lái)廣為人們使用的技術(shù)。在現(xiàn)今的那些應(yīng)用軟件中，有代表性的主要種包含了嵌套表格，用以創(chuàng)建一種復(fù)雜得多的版面設(shè)計(jì)，不過(guò)，它的復(fù)雜性雖然被人為加大了，它所采用的基本技術(shù)卻并沒(méi)有改變。
將居中的設(shè)計(jì)轉(zhuǎn)換成使用CSS
要想將這種傳統(tǒng)的基于表格的版面設(shè)計(jì)轉(zhuǎn)換成用CSS，你只要用divs來(lái)代替那些表格和表格單元就行了。一個(gè)div取代表格本身，另一個(gè)取代那些單個(gè)的表格單元，這些單個(gè)的表格單元定義了主要的版面設(shè)計(jì)元素，諸如標(biāo)題，頁(yè)腳，導(dǎo)航工欄，以及主要內(nèi)容。每個(gè)div都有一個(gè)id,且它們的id都是獨(dú)一無(wú)二的，你可以用一個(gè)CSS選擇器來(lái)讓它們創(chuàng)建各自不同的樣式，每一種樣式對(duì)應(yīng)于div中的一種，這種對(duì)應(yīng)關(guān)系依據(jù)id而建立。那個(gè)取代表格的div被標(biāo)上了id=外部，其它那些div則靠他們各自的功能來(lái)鑒別。
這是已校訂過(guò)的用div代替表格的XHTML的編碼：
<body>
<div id="outer">
<div id="header">
<h2>Header</h2>
</div>
<div id="nav">
<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>
</div>
<div id="main">
<p>Main Content -- Love's not time's fool...</p>
</div>
<div id="footer">
<p>Footer text -- Admit impediments...</p>
</div>
</div>
</body>
注意一下所有那些陳述的格式，原來(lái)它們被包括在<table>和<td>標(biāo)簽中，現(xiàn)在已經(jīng)被移走了。而那些位于表格前面和后面的空白段落也都不見了。CSS格式會(huì)處理所有的格式化以及空間的問(wèn)題。
以下是CSS的編碼，就是這些編碼，將頁(yè)面設(shè)計(jì)成一種居中的樣式，這種設(shè)計(jì)與前面所說(shuō)的基于表格的設(shè)計(jì)很類似：
body {
background-color: #999999;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer {
width: 80%;
background-color:#FFFFFF;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}
div#header {
padding: 15px;
margin: 0px;
text-align: center;
}
div#nav {
width: 25%;
padding: 10px;
margin-top: 1px;
float: left;
}
div#main {
margin-left: 30%;
margin-top: 1px;
padding: 10px;
}
div#footer {
padding: 15px;
margin: 0px;
border-top: thin solid #000000;
}
圖表B http://meadhra.com/CNET/040804/figure-b.html 顯示了結(jié)果，即用CSS執(zhí)行的一個(gè)居中頁(yè)面的版面設(shè)計(jì)。
解析CSS編碼
與基于表格的版面設(shè)計(jì)比起來(lái)，它的主體樣式并沒(méi)有什么變化。它只不過(guò)設(shè)置了一下背景顏色，默認(rèn)正文字體以及尺寸大小。
div#outer是其中的一種樣式，它是這一技術(shù)的關(guān)鍵。這就是前面提到過(guò)的以div取代表格的樣式，它創(chuàng)建了居中的盒子，而這個(gè)盒子成了包容該頁(yè)面所有內(nèi)容的容器。將寬度設(shè)置為80%的規(guī)則設(shè)定了該div的寬度，就跟表格標(biāo)簽的相應(yīng)屬性規(guī)定該表格的寬度一樣。與此相類似，background-color:#FFFFFF為div建立了一個(gè)白色的背景，就如同表格中bgcolor="#FFFFFF"屬性為表格設(shè)置白色背景一樣。margin-top: 50px and margin-bottom: 50px則用頂端和底端的空白來(lái)取代表格中用來(lái)造成垂直空間的空白段落。
這一技術(shù)的關(guān)鍵在于，外部div的中心要安排合適。這里存在一個(gè)難題，可以說(shuō)是我們面臨的一個(gè)挑戰(zhàn)，即div沒(méi)有像align="center"這樣一個(gè)屬性，這與表格不同，表格中有這樣一種屬性。你可以在div的母元素（在本案例，指< body >標(biāo)簽）中使用text-align: center來(lái)將外部div置于中心位置。盡管除了正文以外，大多數(shù)瀏覽器還會(huì)為一些諸如div的塊元素使用該隊(duì)列，但是我們有證據(jù)可以證明它是對(duì)排列正文這一屬性的誤用，而且它會(huì)使問(wèn)題復(fù)雜化，就如同你創(chuàng)建一些額外的樣式來(lái)使那些已按正常標(biāo)準(zhǔn)對(duì)齊的文字重新回到左邊一樣。
用CSS來(lái)將塊元素置于中心位置的正確方法是這樣設(shè)置：margin-left: auto，margin-right: auto。這就指示瀏覽器自動(dòng)計(jì)算頁(yè)面兩邊合適的空白寬度，從而將div置于中心。border: thin solid #000000這一規(guī)則在外部div的周圍添加了一個(gè)邊界，這是因?yàn)橛肅SS添加很容易，而如果用表格的話就很難了。CSS編碼中的其它部份則規(guī)定了div的頁(yè)眉，頁(yè)腳，nav，以及主要內(nèi)容。
div#header和div#footer則設(shè)定了那些div的頁(yè)邊空白以及填料。此外，div#header包含了text-align: center這一規(guī)則，它可以將頁(yè)眉文本置于中心位置，div#footer則包含了border-top: thin solid #000000這一規(guī)則，它可以創(chuàng)建一個(gè)圍繞該div的頂端邊緣的邊界，而在基于表格的版面設(shè)計(jì)中，與它相對(duì)應(yīng)的則是位于頁(yè)腳上方的一些水平線。
在這個(gè)居中的盒子的中央，div#nav和div#main建立了兩個(gè)縱列。在div#nav樣式中，float: left這一規(guī)則將div推到它的母元素（外部div）的左邊，而width: 25%這一規(guī)則將該div的寬度設(shè)置為它的母元素的25%。由于該nav div被移到了左端，其寬度也被限定了，這就為主要的div留下了活動(dòng)空間，讓它可以移到該nav div的右邊，這樣就取得了兩個(gè)縱列的效果。div#main樣式包含了左邊頁(yè)面空白30%的規(guī)則，以讓主要文本排列在一個(gè)整齊的縱欄中，而不是分散開來(lái)，甚至散到該nav縱欄外面。主要的div左邊的空白頁(yè)面比nav div中左邊空白頁(yè)面的寬度稍稍大一點(diǎn)。在我的“用CSS漂浮來(lái)創(chuàng)建一個(gè)三欄頁(yè)面版面設(shè)計(jì)” http://uk.builder.com/webdevelopment/design/0,39026630,39212737,00.htm 一文中，我詳細(xì)介紹了一種技術(shù)，這一技術(shù)是用CSS漂浮來(lái)創(chuàng)建頁(yè)面設(shè)計(jì)中的多個(gè)縱列的。
