快捷導(dǎo)航

采用XHTML和CSS設(shè)計(jì)可重用可換膚的WEB站點(diǎn)的方法第3/4頁(yè)

更新時(shí)間：2008年09月02日 00:41:28 作者：

隨著XHTML的逐漸推廣流行，HTML 在許多場(chǎng)合已經(jīng)顯得過(guò)時(shí)。World Wide Web Consortium (W3C) 于 2000 年 6 月 26 日發(fā)布了 XHTML 的第一個(gè)版本作為推薦標(biāo)準(zhǔn)。

通過(guò)CSS的定義，我們可以將這些DIV標(biāo)簽包含的區(qū)塊放在頁(yè)面上任何位置，再指定這些塊的顏色、字體、邊框、背景以及對(duì)齊屬性等等。如：我們?cè)俳iteLayout.css文件，定義如下：

.pageHeader
（
    padding: 10px;
    border: 1px solid #666;
    height: 100px;
    height: 70px;
）
.pageNav
（
    padding: 10px;
    border: 1px solid #666;
    height: 100px;
    height: 30px;
）
.catalogNav
（
    float: left;
    top: 130px;
    padding: 10px;
    border: 1px solid #666;
    width: 20%;
）
.pageSearch
（
    float: left;
    top: 130px;
    padding: 10px;
    border: 1px solid #666;
    width: 20%;
）
.pageContent
（
    float: left;
    padding: 10px;
    border: 1px solid #666;
    height: 400px;
    width: 60%;
）
.pageBottom
（
    clear: both;
    padding: 10px;
    border: 1px solid #666;
    height: 100px;
    height: 70px;
）

如此，我們定義了一個(gè)三列的頁(yè)面布局：頂部自適應(yīng)頁(yè)面寬度。中間三列自適應(yīng)頁(yè)面。底部自適應(yīng)頁(yè)面寬度，當(dāng)然您也可以將頁(yè)面定義為中間只有兩列等等，您只需要調(diào)整layout.css文件即可，這樣您可以靈活的修改頁(yè)面的布局，讓頁(yè)面外觀(guān)發(fā)生根本的變化，而不必動(dòng)到HTML源文件，這一點(diǎn)對(duì)于服務(wù)器端生成代碼的程序尤為重要。更多關(guān)于CSS布局的資料，請(qǐng)參見(jiàn)：http://www.w3cn.org/article/layout/2004/55.html

4、定義站點(diǎn)獨(dú)有的樣式

經(jīng)過(guò)以上兩步之后，我們已經(jīng)有了一個(gè)大概的頁(yè)面主題外觀(guān)，接下來(lái)我們要設(shè)計(jì)站點(diǎn)的細(xì)節(jié)，比如，對(duì)站點(diǎn)導(dǎo)航條我們想使用與普通超鏈接不一樣的樣式，如：藍(lán)色、加粗、字體更大、再加上有立體效果的背景圖：

. pageNav a:link, . pageNav a:hover, . pageNav a:visted (Color:#36c;
font-weight:bold; font-size:120%; background: url(images/bg_siteMenu.jpg) #36c;
)

對(duì)于欄目導(dǎo)航，我們想給每個(gè)欄目連接加上背景色，并且有鼠標(biāo)滑過(guò)和移出的效果。欄目導(dǎo)航區(qū)的html代碼為：

欄目導(dǎo)航區(qū)對(duì)應(yīng)的Css代碼為：

.catalogNav ul

(

margin-left: -30px;

list-style: none;

)

.catalogNav li

(

float: left;

background: #CCC;

line-height: 30px;

border: solid 1px #black;

)

.catalogNav a

(

width: 100%;

text-align: center;

height: 30px;

)

.catalogNav a:link

(

color: #666;

background: url(arrow_off.gif) #CCC no-repeat 5px 12px;

text-decoration: none;

)

.catalogNav a:visited

(

color: #666;

text-decoration: underline;

)

.catalogNav a:hover

(

color: #FFF;

font-weight: bold;

text-decoration: none;

background: url(arrow_on.gif) #F00 no-repeat 5px 12px;

)

接下來(lái)我們還需要定義其他的站點(diǎn)獨(dú)有的樣式，如欄目標(biāo)題、文章列表、文章正文、時(shí)間、注釋、提示、錯(cuò)誤等等各種樣式，而且這些樣式多以類(lèi)和id來(lái)作為選擇符。這些樣式都是針對(duì)某個(gè)站點(diǎn)的，不適用于其他的站點(diǎn)，然后我們將這些樣式保存為siteStyle.css文件。

這樣我們就有了3個(gè)CSS文件。 SiteComm.css：任何站點(diǎn)都可以使用的樣式文件，定義了常用的html標(biāo)簽樣式。 SiteLayout.css：站點(diǎn)的布局文件，能適用于大多數(shù)的網(wǎng)站結(jié)構(gòu)，具體細(xì)節(jié)需要調(diào)整。 siteStyle.css：站點(diǎn)獨(dú)有的樣式文件，能顯示出本站點(diǎn)獨(dú)特的風(fēng)格和適應(yīng)于站點(diǎn)的內(nèi)容。

然后我們采用外部調(diào)用法：將這些樣式表與頁(yè)面關(guān)聯(lián)起來(lái)。