創建靈活的CSS2邊框效果

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

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

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

現在，在頁面左邊有了一個200px寬450px高的灰色欄。在它左右各有1px寬的黑色邊框，但上下都沒有，而是共用了topnav的底邊邊框和footer的頂部邊框。請注意很重要的一點,leftnav使用了float屬性。將float屬性設置為“left”，leftnav將總是定位于下一個元素的左邊。在這個例子中，它定位于body元素的左邊。

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

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

這個頁面布局的最后一項是footer的設置。為創建footer，我添加了 Listing E 中的代碼。

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

導航欄

現在已經完成了基本的頁面部署，使用CSS2邊框在topnav區域上創建按鈕。 Figure B 顯示了頁面布局最后的效果圖。

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

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

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

由于其它按鈕都具有超級鏈接，我可以使用不同的鏈接行為，比如盤旋，來觸發不同的樣式。這樣我就可以創建鼠標特效：當鼠標移過按鈕時，按鈕的背景色由藍色變為深灰色。如果沒有CSS2，這樣的效果通常需要兩張圖片，一張用于正常狀態，另一張用于鼠標移過的狀態。

站點更新更容易

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

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

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

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

創建靈活的CSS2邊框效果