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

DIVCSS實(shí)例教程：蔚藍(lán)色的海洋漂亮的CSS縱向菜單_DIV+CSS實(shí)例

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

　　一個(gè)具有良好視覺網(wǎng)站的建立，離不開幾大要素，頭部的設(shè)計(jì)，菜單導(dǎo)航的設(shè)計(jì)，內(nèi)容區(qū)塊的組織，底部的設(shè)計(jì)等等。可見菜單在網(wǎng)頁設(shè)計(jì)中有著舉足輕重的作用，一個(gè)漂亮的菜單會(huì)為整個(gè)網(wǎng)頁添加靚麗，也或者一個(gè)菜單就“撐”起了整個(gè)網(wǎng)頁的視覺，成為訪客視線的中心。

　　今天我們共同來完成一個(gè)漂亮的CSS縱向菜單的制作，我給它起了一個(gè)名字：蔚藍(lán)色的海洋。我們看最終完成時(shí)的效果：

　　下面我們開始制作這款菜單，假如你有愛好，我們一起動(dòng)手吧，光說不練是不能很快的提高編碼技巧的，只有勤于練習(xí)、多動(dòng)力，會(huì)有意想不到的收獲。看下面的XHTML代碼：

示例代碼 [m.dounai2.com]

<ul id="menu">
<li><a href="#" title="">MB5U.com首頁</a></li>
<li><a href="#" title="">Div CSS教程</a></li>
<li><a href="#" title="">CSS布局實(shí)例</a></li>
<li><a href="#" title="">CSS2.0教程</a></li>
<li><a href="#" title="">CSS酷站欣賞</a></li>
<li><a href="#" title="">CSS模板下載</a></li>
</ul>

　　上面的XHTML代碼沒啥好說的了，一個(gè)基本的UL無序列表，及若干列表項(xiàng)作為菜單的內(nèi)容。我們看下面的CSS代碼：

示例代碼 [m.dounai2.com]

* {
font-size:13px;
font-weight:800;
text-decoration:none;
margin:0;
padding:0;
background:#fff;
}

　　整體布局聲明：文字大小，加粗，去除裝飾線，邊距及填充，背景色。

示例代碼 [m.dounai2.com]

#menu {
list-style-type: none;
margin:50px auto;
width:200px;
}

　　設(shè)置UL無序列表#menu的樣式：去除列表項(xiàng)預(yù)設(shè)標(biāo)記，上下邊距為50px，左右邊距為auto，實(shí)現(xiàn)水平居中對(duì)齊。寬度為200px。

示例代碼 [m.dounai2.com]

#menu li a {
display:block;
width:200px;
height:36px;
line-height:36px;
text-indent:36px;
text-align:left;
color:#fff;
background:#fff url(mb5u.com_a.jpg) 0 0 no-repeat;
}
#menu li a:hover {
text-indent:46px;
background:#fff url(mb5u.com_b.jpg) 0 0 no-repeat;
}

　　設(shè)置鏈接a的樣式：塊元素，寬度與高度分別是200px、36px，為了實(shí)現(xiàn)文字垂直居中于菜單區(qū)域我們定義行高為36px，文字縮進(jìn)36px，文字對(duì)齊方式為居左對(duì)齊，文字顏色為白色#fff。背景設(shè)置為白色，背景圖片為“mb5u.com_a.jpg” 位于 0 0。不重復(fù)。

　　設(shè)置鏈接懸停時(shí)a:hover的樣式，文字縮進(jìn)增加到46px，背景圖片發(fā)生了變化，圖片變成了“mb5u.com_b.jpg”。
　　至此，我們的這款菜單就制作完成了。點(diǎn)擊這里查看效果！
　　或許你認(rèn)為在鼠標(biāo)懸停時(shí)文字縮進(jìn)的改變效果并不好，我們可以去除這一改變，點(diǎn)擊這里查看效果！