。CSS橫向菜單的制作大家或許已經都能把握了，但小小的菜單包含了許多的變化，我們完全可以將它做的更漂亮！


　　我們今天所要講述的依然是CSS橫向菜單的制作，這與前面的例子有所區別，我并不僅要看到視覺上的變化，我們還要讓它更實用，我們通過這個小案例來向你闡明CSS當前頁效果是如何實現的。讓我們開始吧！


　　這是HTML代碼，除了一個菜單的無序列表UL，還多了一些東西，下面的topline是一個分隔線，我們只是設置一下背景色，我們就不去討論了；我們發現給body命名了一個id！它的作用就是用來制作當前頁效果的，是讓選擇符精確的找到目標。我們在菜單無序列表內的鏈接元素都命名了不同的id，從cur1至cur6。我們在下面具體的討論它究竟如何發揮作用。
　　看CSS代碼：


　　第一區塊的整體布局聲明；第二區塊是body的背景色，或許有人會說，白色可以不設置了，不過需要提醒各位，有些瀏覽器默認的body顏色不一定是白色哦，還是別嫌麻煩設置一下#fff；第三區塊設置菜單無序列表ul的寬度及邊距。第四區塊列表項的有關聲明。

　　第五區塊就輪到鏈接元素了。向左浮動，右邊距為1px，使菜單之間有一定的間隔，高度26px，行高26px，這兩項聲明，一方面是設置了菜單的高度，另一方面行距的設置可以讓文字垂直居中對齊了，假如缺少了行高，看上去就不那么美妙了。聲明填充，上下是0px、左右是8px，上下填充不用設置，因為已經有行高讓文字與外邊產生了距離，聲明左右填充是在水平方向上讓文字與外邊有一定的距離。

　　去除鏈接文字下劃線，鏈接文字的顏色為#333深灰色。設置背景圖片為link.jpg。此例中背景圖片就是一個漸變色的區塊，我們不提倡過多的使用CSS濾鏡實現這樣的效果，對于這樣的視覺效果，個人認為用背景圖片比較好，一方面是提高了代碼執行效率，另一方面圖片文件體積小于1K（三個文件累積不大于1K），不會占用帶寬。

　　第六區域設置了鏈接我激活hover樣式，文字顏色變成了黑色#000。背景圖片也變成了hover.jpg。

　　第七區域是此例的重點了。CSS當前頁效果就是通過它來聲明的，選擇符我們羅列了一大圈，請注重：這六個選擇符所對應的元素應用的樣式是一致的，因為他們是通過“,”分隔的，這么長的字母或許你看了感覺眼花，我們分解如下：


　　我們應該能理解這些選擇符的含意，拿第一個來說：表示在id為home下面的一個id為nav的列表項的a的cur1。這樣我們就精確的命中目標了！

　　其它的五個含義與之類似，我們發現，除了第一個（#home）與最末（#cur1），選擇符之間的結構是一樣的。在上面我們給body命名一個id為home。而且我們為不同的鏈接賦予了不同的id，從cur1至cur6。

　　這時候它們就發揮作用了。這就表示在body的id為home的這一頁，菜單中id為cur1的鏈接所應用的樣式。與此類推：在body的id為divcss的這一頁，菜單中id為cur2鏈接所應用的樣式；在body的id為csslayout的這一頁，菜單中id為cur3鏈接所應用的樣式……

　　我們只需要改變body的id，再通過CSS的設置，就可以形成了菜單的當前頁效果。當然，你也需要在HTML編寫之初，就給你的菜單賦予一個id。

　　這在動態頁的制作中是非常有用的。例如我們將菜單部分制作成一個獨立的*.asp文件或者直接寫在數據庫中，然后在需要的頁面直接include這個文件或讀取數據庫。要實現當前頁的效果，我們只需要改變一個body的id就全部搞定了。這就是當前頁效果的思路。

　　最后一個區塊我們只是加了一個裝飾性的小色條，無須多說，只是需要提醒你的是overflow:hidden;的設置，假如沒有這一條聲明，我們的小色條可能不是這樣的最小高度。