創(chuàng)建靈活的CSS2邊框效果

作者： ZDNet China 2004-01-09 12:12 PM

在Internet繁榮發(fā)展的早期，為了實(shí)現(xiàn)我想要的頁(yè)面外觀和行為，不得不編寫一些“丑陋”的代碼。我花費(fèi)了大量時(shí)間去準(zhǔn)備無(wú)數(shù)的圖形文件，用他們創(chuàng)建鼠標(biāo)特效和導(dǎo)航欄，結(jié)果卻發(fā)現(xiàn)要通過(guò)一個(gè)28.8K的modem來(lái)下載它們需要的時(shí)間太長(zhǎng)了。我希望哪天網(wǎng)絡(luò)帶寬能像流水一樣通暢無(wú)阻，那樣就能很快地下載頁(yè)面。 <!--start banner ad--><!--ba--> <noscript></noscript> <!--end banner ad--> 更具諷刺意味的是，現(xiàn)在的帶寬資源豐富了許多，但繁瑣的圖形編碼卻已經(jīng)過(guò)時(shí)了。幸運(yùn)的是，重疊樣式表2（CSS2）讓我們可以使用它的邊框?qū)傩詾樾枰獔D形的代碼重新創(chuàng)建各種效果。 頁(yè)面布局 以前，為使頁(yè)面布局合理準(zhǔn)確，我花費(fèi)大量的時(shí)間調(diào)整表格、分格GIF以及背景顏色。不幸的是，這樣做的結(jié)果是最終代碼經(jīng)常不必要地膨脹起來(lái)。而且，一旦布局被編碼，要想再改變它就很困難，同時(shí)還要花費(fèi)許多時(shí)間。 使用CSS2，特別是它的邊框?qū)傩裕麄€(gè)頁(yè)面可以一個(gè)表格或分格GIF都不用。以 Figure A 中的頁(yè)面布局為例。 我將從創(chuàng)建header區(qū)域開(kāi)始。參看 Listing A 中的代碼，作為演示它使用了內(nèi)嵌的樣式表。 這段代碼創(chuàng)建了一個(gè)75px高、四周帶有1px寬黑色邊框的藍(lán)色高亮區(qū)域。為了確保對(duì)三種主流瀏覽器的兼容性，并讓布局配合瀏覽器窗口，我沒(méi)有設(shè)置header的寬度屬性。 下面是topnav區(qū)域。為創(chuàng)建這個(gè)區(qū)域，我更新代碼為 Listing B 。 在header下面，有一個(gè)三邊都帶有1px大小黑色邊框的深藍(lán)色區(qū)域。我沒(méi)有在topnav的頂部使用邊框，因?yàn)橐呀?jīng)使用了header底邊邊框來(lái)分隔這兩個(gè)區(qū)域。與header一樣，不指定topnav的寬度。

接著，我添加了leftnav。代碼參看 Listing C 。

現(xiàn)在，在頁(yè)面左邊有了一個(gè)200px寬450px高的灰色欄。在它左右各有1px寬的黑色邊框，但上下都沒(méi)有，而是共用了topnav的底邊邊框和footer的頂部邊框。請(qǐng)注意很重要的一點(diǎn),leftnav使用了float屬性。將float屬性設(shè)置為“l(fā)eft”，leftnav將總是定位于下一個(gè)元素的左邊。在這個(gè)例子中，它定位于body元素的左邊。

添加完body元素后的代碼如 Listing D 。

body區(qū)域高450像素，在其右邊有1px寬的黑色邊框。body區(qū)域使用了topnav的底邊邊框、leftnav的右邊邊框和footer的頂部邊框，這樣body的四周上都有1px寬的黑色邊框。和header和topnav一樣，我沒(méi)有設(shè)置bodyde的寬度屬性。

這個(gè)頁(yè)面布局的最后一項(xiàng)是footer的設(shè)置。為創(chuàng)建footer，我添加了 Listing E 中的代碼。

關(guān)于footer有兩點(diǎn)要注意。第一，沒(méi)有使用任何邊框?qū)傩浴Ｓ捎趂ooter本身是黑色的，而所有其他元素的邊框也都是黑色的，所以footer的周圍就沒(méi)必要再加邊框了。第二，我是用了clear屬性。將clear設(shè)置為“none”，那么footer將不會(huì)受相關(guān)的其他元素位置的影響。例如，如果body元素使用了“float:left”（提示將footer放到body的右邊）， 使用“clear:both”將覆蓋float屬性，而將footer放置在它原本的頁(yè)面底部。

導(dǎo)航欄

現(xiàn)在已經(jīng)完成了基本的頁(yè)面部署，使用CSS2邊框在topnav區(qū)域上創(chuàng)建按鈕。 Figure B 顯示了頁(yè)面布局最后的效果圖。

如同頁(yè)面布局一樣，所有的按鈕效果都可以用CSS2來(lái)創(chuàng)建。 Listing F 包含了導(dǎo)航欄的代碼。

現(xiàn)在四個(gè)排成一行的按鈕出現(xiàn)在topnav區(qū)域里，每個(gè)按鈕右邊都有1px寬的黑色邊框。第一個(gè)按鈕借用topnav的邊框作為其左邊框。其它的按鈕使用各自左邊按鈕的右邊框作為其左邊框。

我使用了“buttons strong”樣式來(lái)高亮顯示與用戶當(dāng)前所在頁(yè)面對(duì)應(yīng)按鈕。例如，如果這就是我的主頁(yè)，我想要“home”按鈕呈現(xiàn)與其它按鈕不同的樣式。使用“buttons strong”樣式，就可以為任何按鈕創(chuàng)建與眾不同的外觀，只需要在文字上添加<strong>標(biāo)簽。

由于其它按鈕都具有超級(jí)鏈接，我可以使用不同的鏈接行為，比如盤旋，來(lái)觸發(fā)不同的樣式。這樣我就可以創(chuàng)建鼠標(biāo)特效：當(dāng)鼠標(biāo)移過(guò)按鈕時(shí)，按鈕的背景色由藍(lán)色變?yōu)樯罨疑Ｈ绻麤](méi)有CSS2，這樣的效果通常需要兩張圖片，一張用于正常狀態(tài)，另一張用于鼠標(biāo)移過(guò)的狀態(tài)。

站點(diǎn)更新更容易

CSS2不但簡(jiǎn)化代碼，還使站點(diǎn)的更新比純HTML頁(yè)面更為快速簡(jiǎn)單。比起編碼復(fù)雜、需要手工修改每一頁(yè)的HTML頁(yè)面來(lái)，CSS2只需更新樣式表就能夠改變整個(gè)站點(diǎn)。這個(gè)例子中為了簡(jiǎn)便我使用了內(nèi)部樣式表；然而，你可以使用外部樣式表獲得CSS2的所有優(yōu)勢(shì)。

例如，如果你厭煩了leftnav欄并想把它放到右邊，那么只需要改變leftnav和body的樣式信息。改變將對(duì)所有使用這個(gè)樣式表的HTML頁(yè)面生效。

另外，如果你想改變按鈕的標(biāo)題，不必創(chuàng)建新的按鈕圖像，只需改變HTML文件中的文本就可以了。

這就是更新容易、跨瀏覽器兼容、沒(méi)有表格、分格GIF以及按鈕圖片的CSS2外觀布局。

創(chuàng)建靈活的CSS2邊框效果