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

CSS實(shí)例教程：CSS橫向菜單會(huì)動(dòng)的小豎條_DIV+CSS實(shí)例

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

我們可以讓我們的菜單更加的美化，加上一些裝飾性的效果，同時(shí)也提高用戶的易用性。今天我們學(xué)習(xí)《CSS橫向菜單會(huì)動(dòng)的小豎條》。最終效果如下：

　　HTML非常簡單主要是通過CSS實(shí)現(xiàn)這款菜單效果

示例代碼 [www.wf0088.com]

<ul id="nav">
<li><a href="http://www.wf0088.com/">Div CSS教程</a></li>
<li><a href="http://www.wf0088.com/">CSS布局實(shí)例</a></li>
<li><a href="http://www.wf0088.com/">CSS2.0教程</a></li>
<li><a href="http://www.wf0088.com/">CSS酷站欣賞</a></li>
<li><a href="http://www.wf0088.com/">CSS模板下載</a></li>
</ul>

我們具體的解釋與說明CSS代碼，看它是如何控制這個(gè)UL LI打造CSS橫向菜單的：

示例代碼 [www.wf0088.com]

* {
font-size:12px;
text-align:center;
}
#nav {
width:520px;
border-bottom:1px solid #06f;
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:5px;
padding:5px 10px 5px 8px;
text-decoration: none;
color:#000;
background:#ffe67d;
border-left: 5px solid #fc0;
}
#nav li a:hover {
color:#060;
border-left: 5px solid #f60;
}

　　首頁我們進(jìn)行了整體布局聲明，聲明了文字大小及居中的對(duì)齊方式。需要說明的是，在ff中，我們?cè)O(shè)置margin:0 auto。即可實(shí)現(xiàn)容器的居中了，但在IE中，這還不夠，還需要在父容器中聲明text-align:center。這一點(diǎn)我們要記得，不然輕易出錯(cuò)。
　　聲明UL無序列表的寬度為520ox，下邊框一象素的實(shí)現(xiàn)，顏色為#06f。我們?cè)O(shè)置了nav這個(gè)UL，距離頂部為20px、距離底部為零，左右的距離為auto。這就實(shí)現(xiàn)了nav在水平方向內(nèi)是居中的，垂直方面上距離瀏覽器窗口20px。
　　聲明LI列表項(xiàng)為內(nèi)聯(lián)（行內(nèi)）顯示，列表預(yù)設(shè)標(biāo)記為無。

　　我們重點(diǎn)需要理解#nav li a:link,#nav li a:visited的定義，設(shè)置鏈接的樣式。
　　向左浮動(dòng)，并且右邊距為5px。這是設(shè)置鏈接元素從左向右排行，并且元素之間的右部間隔5px。
　　設(shè)置填充，頂5px、右10px、下5px、左8px。這一設(shè)置可以使我們的鏈接文字處于合適的位置。
　　取消鏈接文字的下劃線，并設(shè)置鏈接文字的顏色為#000。鏈接元素的背景色為#ffe67d。
　　左邊框五象素的實(shí)線，顏色為#fc0。這一句話形成了我們的小豎條。

　　我們通過下面#nav li a:hover形成鼠標(biāo)激活的樣式。
　　鏈接文字的顏色變?yōu)?060。左邊框五象素的實(shí)線，顏色為#f60。
　　這樣我們會(huì)動(dòng)的小豎條菜單就制作完成了。看最終的效果：