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


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


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


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

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

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

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

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


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

　　其它的五個含義與之類似，我們發(fā)現(xiàn)，除了第一個（#home）與最末（#cur1），選擇符之間的結(jié)構(gòu)是一樣的。在上面我們給body命名一個id為home。而且我們?yōu)椴煌�的鏈接賦予了不同的id，從cur1至cur6。

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

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

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

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