DIVCSS橫向菜單實(shí)例：簡(jiǎn)單的思路陷下的風(fēng)格不錯(cuò)的效果_DIV+CSS實(shí)例

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

　　我們對(duì)CSS菜單的介紹也不算少了，可是今天在群里，依然有朋友提出這方面的問(wèn)題。我不清楚是因?yàn)榇蠹覜](méi)有認(rèn)真看我的教程，還是因?yàn)槲以诮坛虄?nèi)沒(méi)有向大家介紹清楚，菜單其實(shí)是很輕易實(shí)現(xiàn)的。

　　在很多時(shí)候我們?yōu)榱俗非蟊容^好的頁(yè)面效果，往往專心的去思考如何編寫(xiě)菜單，怎么樣有更好的視覺(jué)與用戶體驗(yàn)，其實(shí)復(fù)雜并不見(jiàn)得是一件好事。有時(shí)候簡(jiǎn)單的實(shí)現(xiàn)，卻能達(dá)到很好的效果。我們來(lái)看今天的例子：（可點(diǎn)擊放大圖片）

　　這是一個(gè)藍(lán)色底子的導(dǎo)航條，鏈接文字是白色，非常清爽，當(dāng)鼠標(biāo)懸停的時(shí)候，鏈接文字的背景作出了一個(gè)陷下的效果。非常簡(jiǎn)單，但很明顯直白的提醒了用戶，你的鼠標(biāo)已經(jīng)激活鏈接了，點(diǎn)一下就可以進(jìn)一步看里面的內(nèi)容。

　　我們分析一下如何構(gòu)建這個(gè)菜單：

　　XHTML方面：建立一個(gè)UL無(wú)序列表作為容器，里面的列表項(xiàng)LI作為菜單項(xiàng)目，我們給UL無(wú)序列表賦予一個(gè)ID，即可通過(guò)選擇器輕松搞定一切CSS樣式編碼了。我們無(wú)需為每一個(gè)LI列表項(xiàng)或A鏈接再設(shè)置任何的ID或CLASS。

　　CSS方面：我們對(duì)UL設(shè)置寬與高并將它居于窗口的中間，給它一個(gè)背景色。對(duì)列表項(xiàng)LI設(shè)置為浮動(dòng)。并讓LI之間產(chǎn)生一定的外邊距，拉開(kāi)菜單項(xiàng)之間的距離。我們對(duì)LI內(nèi)的鏈接A，設(shè)置鼠標(biāo)懸停時(shí)的背景圖片。這個(gè)實(shí)例基本搞定了。

　　有了上面的分析我們開(kāi)始動(dòng)手編碼。XHTML代碼如下：

示例代碼 [hl5o.cn]

　　我們用CSS對(duì)此菜單進(jìn)行樣式定制：

示例代碼 [hl5o.cn]

* {
font-size:12px;
text-decoration:none;
}
#nav {
height:30px;
width:688px;
margin:60px auto;
list-style-type:none;
background:#0046ad;
}
#nav li {
margin:5px 0 0 16px;
float:left;
display:inline;
}
#nav li a {
display:block;
width:68px;
height:20px;
line-height:20px;
text-align:center;
color:#fffeee;
}
#nav li a:hover {
color:#000;
background:url(nav.jpg) 0 0 no-repeat;
}

　　我們首先進(jìn)行了整體布局聲明，文字大小設(shè)置以及去除下劃線。我們?cè)O(shè)置UL無(wú)序列表的高寬以及邊距，去除列表項(xiàng)預(yù)設(shè)標(biāo)記list-style-type:none;。設(shè)置背景色為深藍(lán)色#0046ad。LI列表項(xiàng)設(shè)置距頂、距左分別為5px、16px。向左的浮動(dòng)，并將它們內(nèi)聯(lián)。

　　設(shè)置菜單鏈接（#nav li a）為塊元素。寬度、高度分別是：68px、20px。我們讓鏈接內(nèi)的文字垂直居中對(duì)齊，所以設(shè)置行高為20px。我們?cè)O(shè)置文字水平居中對(duì)齊text-align:center。設(shè)置文字顏色為近似于白色的淡黃色#fffeee。

　　最終我們?cè)O(shè)置鼠標(biāo)懸停時(shí)（#nav li a:hover）的鏈接狀態(tài)，文字顏色為黑色，增加了背景圖片nav.jpg并且定位于0 0即左上角，重復(fù)方式為不重復(fù)。