簡潔的CSS菜單：學習CSS

  一直對CSS + DIV 布局高度興趣，特別是面對蛋疼的IE6時，我們總是想方設法的照顧它，平時對這個學習很少，在這做個筆記。

使用美工設計好的圖片也可以製作出一個好看的導覽功能表，可是通過巧妙的CSS照樣可以。

這裡是我仿照 jQuery 網站製作的一個導航，：

 

製作步驟：

1.編寫html。

 

2.編寫CSS。

我打算使用兩張圖片，第一章填充導航的左邊，這張一定要長，保證隨著 #header_nav 中的 <li> 增多時，也能夠完全使用圖片包住。

使用第二張圖片填充導航的最右邊，兩張圖片都有圓角，讓導航顯得更加流暢。

 

 

注意圖片的圓角是黑色的。圖片的藍色可以跟黑色搭配，讓導航顯示更加明顯。

首先設定 #header_nav 的background 為第一張圖片，設定 <ul> 的 background 為第二張。

通過設定 <li> 兩邊的 border 隔離。

 

3.設定第一個<li>和最後一個<li>的邊。

 

當然這個通過 CSS 設定，但是為了 CSS 的簡潔性，只好用了 JS。

最後把源碼附上。

下載