CSS菜單：明快清新的格調(diào)闡述CSS當(dāng)前頁(yè)效果的實(shí)現(xiàn)_DIV+CSS實(shí)例

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

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

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

示例代碼 [hl5o.cn]

<body id="home">
<ul id="nav">
<li><a href="index.html" id="cur1">MB5U.com 首頁(yè)</a></li>
<li><a href="c2.html" id="cur2">Div CSS教程</a></li>
<li><a href="c3.html" id="cur3">CSS布局實(shí)例</a></li>
<li><a href="c4.html" id="cur4">CSS2.0教程</a></li>
<li><a href="c5.html" id="cur5">CSS酷站欣賞</a></li>
<li><a href="c6.html" id="cur6">CSS模板下載</a></li>
</ul>
<div id="topline"></div>

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

示例代碼 [hl5o.cn]

* {
margin:0;
padding:0;
font-size:12px;
text-align:center;
}
body {
background:#ffff;
}
#nav {
width:700px;
margin:20px auto 0 auto;
}
#nav li {
display:inline;
list-style-type:none;
}
#nav li a:link,#nav li a:visited {
float:left;
margin-right:1px;
height:26px;
line-height:26px;
padding:0 8px;
text-decoration: none;
color:#333;
background:url(link.jpg);
}
#nav li a:hover {
color:#000;
background:url(hover.jpg);
}
#home #nav li a#cur1,#divcss #nav li a#cur2,#csslayout #nav li a#cur3,#css20 #nav li a#cur4,#websites #nav li a#cur5,#moban #nav li a#cur6 {
color:#fff;
background:url(current.jpg);
}
#topline {
width:100%;
height:3px;
overflow:hidden;
background:#06f;
}

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

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

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

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

　　第七區(qū)域是此例的重點(diǎn)了。CSS當(dāng)前頁(yè)效果就是通過(guò)它來(lái)聲明的，選擇符我們羅列了一大圈，請(qǐng)注重：這六個(gè)選擇符所對(duì)應(yīng)的元素應(yīng)用的樣式是一致的，因?yàn)樗麄兪峭ㄟ^(guò)“,”分隔的，這么長(zhǎng)的字母或許你看了感覺眼花，我們分解如下：

示例代碼 [hl5o.cn]

#home #nav li a#cur1,
#divcss #nav li a#cur2,
#csslayout #nav li a#cur3,
#css20 #nav li a#cur4,
#websites #nav li a#cur5,
#moban #nav li a#cur6

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

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

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

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

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

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

　　
　　