Div+Css教程模板無(wú)憂(yōu)>建站教程>Div+Css教程>DIV+CSS實(shí)例>

DIVCSS菜單：黑白灰?guī)в嘘幱靶Ч腃SS橫向菜單_DIV+CSS實(shí)例

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

　　今天我們具體了解一下它是如何工作的。看下面的最終效果圖片：（可點(diǎn)擊放大）

　　首先我們看XHTML代碼：

示例代碼 [m.dounai2.com]

<ul id="menu">
<li><a href="http://m.dounai2.com/">MB5U.com首頁(yè)MB5U.com首頁(yè)</a></li>
<li><a href="http://m.dounai2.com/">Div CSS教程Div CSS教程</a></li>
<li><a href="http://m.dounai2.com/">CSS布局實(shí)例CSS布局實(shí)例</a></li>
<li><a href="http://m.dounai2.com/">CSS2.0教程CSS2.0教程</a></li>
</ul>

　　我們定義了一個(gè)id為menu的無(wú)序列表作為菜單的容器，里面的列表項(xiàng)li就是我們的菜單欄了。我們?cè)诹斜眄?xiàng)li中的鏈接a標(biāo)簽內(nèi)，放置了一個(gè)內(nèi)聯(lián)對(duì)象span，它就是陰影效果載體，我們通過(guò)CSS定義，實(shí)現(xiàn)陰影效果。

　　我們看下面的CSS代碼：

示例代碼 [m.dounai2.com]

　　我們定義menu這個(gè)無(wú)序列表的填充與邊距均為零。高度為2em。清除默認(rèn)列表項(xiàng)預(yù)設(shè)標(biāo)記。定義菜單中的列表項(xiàng)為向左浮動(dòng)，寬度與高度分別是2em。行高為2em，實(shí)現(xiàn)了文字的垂直居中。設(shè)置相對(duì)定位，并設(shè)置文字水平居中對(duì)齊。

　　請(qǐng)注重：我們給ul設(shè)置了左邊框?yàn)?px的實(shí)線(xiàn)，顏色是灰色。border-left:1px solid #bbb; 我們給li設(shè)置了右邊框?yàn)?px的實(shí)績(jī)，顏色是灰色。border-right:1px solid #bbb; 這樣就實(shí)現(xiàn)了左右都存在分割的線(xiàn)條了，請(qǐng)看下面的圖示（可點(diǎn)擊放大）。

　　我們繼續(xù)CSS代碼的編寫(xiě)：

示例代碼 [m.dounai2.com]

#menu li a, #menu li a:visited {
display:block;
text-decoration:none;
color:#000;
}
#menu li a span, #menu li a:visited span {
display:none;
}

　　我們定義鏈接的link與visited狀態(tài)的樣式，設(shè)置塊元素，沒(méi)有裝飾線(xiàn)，顏色為#000；并且在link與visited狀態(tài)下鏈接元素內(nèi)的span元素為不可見(jiàn)：display:none。

示例代碼 [m.dounai2.com]

#menu li a:hover {
border:0;
color:#bbb;
}
#menu li a:hover span {
display:block;
width:8em;
height:2em;
text-align:center;
position:absolute;
left:-1px;
top:-2px;
color:#000;
cursor:pointer;
}

　　在hover鼠標(biāo)懸停時(shí)，鏈接的文字顏色為#bbb。即陰影文字的顏色。而此時(shí)span內(nèi)聯(lián)元素中的文字的設(shè)置發(fā)生了巨大的變化，我們來(lái)看代碼。設(shè)置成塊元素，寬度與高度分別是8em、2em。文字水平居中對(duì)齊，采用絕對(duì)定位，距左與距頂分別是-1px、-2px。文字顏色為黑色，鼠標(biāo)指點(diǎn)為：pointer。

　　實(shí)現(xiàn)的原理與思路小結(jié)：在正常狀態(tài)下，鏈接內(nèi)的文字是黑色的，而鏈接span元素內(nèi)的文字是不可見(jiàn)的。當(dāng)鼠標(biāo)懸停時(shí)。將鏈接文字設(shè)置為淡灰色的陰影，鏈接span元素內(nèi)的文字設(shè)置成黑色，并且其位置向左及向上略移一點(diǎn)點(diǎn)。這樣就實(shí)現(xiàn)了這款菜單的效果。

　　我們看完整的CSS代碼：

示例代碼 [m.dounai2.com]

#menu {
padding:0;
margin:0;
height:2em;
list-style-type:none;
border-left:1px solid #bbb;
}
#menu li {
float:left;
width:8em;
height:2em;
line-height:2em;
border-right:1px solid #bbb;
position:relative;
text-align:center;
}
#menu li a, #menu li a:visited {
display:block;
text-decoration:none;
color:#000;
}
#menu li a span, #menu li a:visited span {
display:none;
}
#menu li a:hover {
border:0;
color:#bbb;
}
#menu li a:hover span {
display:block;
width:8em;
height:2em;
text-align:center;
position:absolute;
left:-1px;
top:-2px;
color:#000;
cursor:pointer;
}