DIVCSS菜單實例：紅與黑具有立體質感的CSS菜單_DIV+CSS實例

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

　　運用UL及LI構建菜單，不但速度上比較快，而且語義更明確，對搜索引擎也非常友好，但很多朋友認為制作起來比較煩，其實不然，CSS菜單的制作其實是非常簡單的，今天的這款菜單思路非常簡單，但效果還算不錯，看下面的效果圖：

　　我們看今天這款菜單的制作過程，首先看看XHTML代碼：

示例代碼 [www.wf0088.com]

<ul id="menu">
<li><a href="http://www.wf0088.com/" title="">MB5U.com首頁</a></li>
<li class="current"><a href="http://www.wf0088.com/" title="">Div CSS教程</a></li>
<li><a href="http://www.wf0088.com/" title="">CSS布局實例</a></li>
<li><a href="http://www.wf0088.com/" title="">CSS2.0教程</a></li>
<li><a href="http://www.wf0088.com/" title="">CSS酷站欣賞</a></li>
<li><a href="http://www.wf0088.com/" title="">CSS模板下載</a></li>
</ul>

　　沒有什么非凡之處，需要注重的是我們為第二個列表項“Div CSS教程”指定了一個類class="current"。這是我們用來讓CSS精確的選擇到當前頁效果的鉤子。下面我們逐一看CSS編碼：

示例代碼 [www.wf0088.com]

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

　　整體布局聲明：文字大小為13px，加粗，去除裝飾線，邊距與填充均為零。
　　設置body的背景色為灰色#ccc。

示例代碼 [www.wf0088.com]

#menu {
list-style-type: none;
border:1px solid #fff;
margin:50px auto;
width:770px;
height:30px;
overflow:hidden;
background:#000 url(mb5u.com_b.png) 0 0 repeat-x;
}

　　設置Ul即#menu的樣式，去除列表項預設標記，設置邊框為一象素的白色實線，上下邊距為50px，左右邊距為自動，實現了菜單的水平居中對齊，設置寬與高分別是：770px、30px。溢出為隱藏，設置背景色為黑色，背景圖片為mb5u.com_b.png，位于0 0，水平方向重復。

示例代碼 [www.wf0088.com]

#menu li {
border-right:1px solid #fff;
float:left;
}
#menu li a {
display:block;
text-align:center;
color:#fff;
line-height:30px;
padding:0 10px;
}

　　列表項li的樣式設置，右邊框一象素的白色實線，向左浮動。這樣設置即實現了菜單有了一個閉合的白線區域，而且浮動讓菜單水平方向排列。

　　菜單鏈接A的樣式，設置為塊元素，文字居中對齊，文字顏色為白色，行高為30px，實現了文字的垂直居中對齊，填充設置為上下0，左右10px，使得文字與左右邊線有一定的距離。

示例代碼 [www.wf0088.com]

#menu li a:hover,#menu li.current {
background:#fff url(mb5u.com_a.png) 0 0 repeat-x;
}

　　設置鏈接A的懸停樣式，以及當前頁的樣式。請注重，這兩種狀態下它們的表現是一樣的，所以我們用群組選擇器：“#menu li a:hover,#menu li.current”一次性設置。背景色為白色，背景圖片為“mb5u.com_a.png”，位于0 0，水平方向重復。

　　好了，致此我們這款菜單的制作就結束了.