DIVCSS實例教程：蔚藍色的海洋漂亮的CSS縱向菜單_DIV+CSS實例

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

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

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

　　下面我們開始制作這款菜單，假如你有愛好，我們一起動手吧，光說不練是不能很快的提高編碼技巧的，只有勤于練習、多動力，會有意想不到的收獲�？聪旅娴腦HTML代碼：

示例代碼 [hl5o.cn]

<ul id="menu">
<li><a href="#" title="">MB5U.com首頁</a></li>
<li><a href="#" title="">Div CSS教程</a></li>
<li><a href="#" title="">CSS布局實例</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代碼沒啥好說的了，一個基本的UL無序列表，及若干列表項作為菜單的內(nèi)容。我們看下面的CSS代碼：

示例代碼 [hl5o.cn]

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

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

示例代碼 [hl5o.cn]

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

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

示例代碼 [hl5o.cn]

#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;
}

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

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