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

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

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

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

現(xiàn)在，在頁面左邊有了一個(gè)200px寬450px高的灰色欄。在它左右各有1px寬的黑色邊框，但上下都沒有，而是共用了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一樣，我沒有設(shè)置bodyde的寬度屬性。

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

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

導(dǎo)航欄

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

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

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

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

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

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

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

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

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

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

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