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

DIVCSS菜單實(shí)例：紅與黑具有立體質(zhì)感的CSS菜單_DIV+CSS實(shí)例

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

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

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

示例代碼 [m.ghpqjb.com]

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

　　沒有什么非凡之處，需要注重的是我們?yōu)榈诙䝼€列表項(xiàng)“Div CSS教程”指定了一個類class="current"。這是我們用來讓CSS精確的選擇到當(dāng)前頁效果的鉤子。下面我們逐一看CSS編碼：

示例代碼 [m.ghpqjb.com]

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

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

示例代碼 [m.ghpqjb.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;
}

　　設(shè)置Ul即#menu的樣式，去除列表項(xiàng)預(yù)設(shè)標(biāo)記，設(shè)置邊框?yàn)橐幌笏氐陌咨珜?shí)線，上下邊距為50px，左右邊距為自動，實(shí)現(xiàn)了菜單的水平居中對齊，設(shè)置寬與高分別是：770px、30px。溢出為隱藏，設(shè)置背景色為黑色，背景圖片為mb5u.com_b.png，位于0 0，水平方向重復(fù)。

示例代碼 [m.ghpqjb.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;
}

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

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

示例代碼 [m.ghpqjb.com]

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

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

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