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

CSS實(shí)例教程：UL制作CSS橫向菜單藍(lán)綠色調(diào)_DIV+CSS實(shí)例

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

我們今天學(xué)習(xí)讓菜單有一個(gè)矩形的背景，并且當(dāng)鼠標(biāo)激活時(shí)能有所變化（hover）。廢話不多說了，讓我們開始吧！

示例代碼 [m.dounai2.com]

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

　　這幾行HTML代碼，大家都不生疏，它是菜單的根基，有了它我們可以通過CSS進(jìn)行樣式定制。

示例代碼 [m.dounai2.com]

#nav {
font-size:12px;
margin:0;
padding:0;
white-space:nowrap;
}

　　我們定義無序列表nav的外邊距及填充均為零，并設(shè)計(jì)字體大小為12px。
　　我們不希望菜單還未結(jié)束就另起一行，我們強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br對(duì)象。

示例代碼 [m.dounai2.com]

#nav li {
display:inline;
list-style-type: none;
}
#nav li a {
padding:5px 8px;
line-height:22px;
}

　　display:inline;內(nèi)聯(lián)（行內(nèi)）,將li限制在一行來顯示；
　　list-style-type: none; 列表項(xiàng)預(yù)設(shè)標(biāo)記為無；
　　padding:5px 8px;設(shè)置鏈接的填充，上下為5px左右為8px；
　　line-height:22px;設(shè)置鏈接的行高為22px。

示例代碼 [m.dounai2.com]

#nav li a:link,#nav li a:visited {
color:#fff;
text-decoration:none;
background:#06f;
}
#nav li a:hover {
background-color: #090;
}

　　上面的代碼是本文的重點(diǎn)，我們定義鏈接的link、visited。
　　color:#fff;字體顏色為白色；
　　text-decoration:none;去除了鏈接文字的下劃線；
　　background:#06f;鏈接在link、visited狀態(tài)下背景色為藍(lán)色。
　　a:hover狀態(tài)下background-color: #090;　鼠標(biāo)激活狀態(tài)鏈接的背景色為綠色。

　　至此我們就完成了這個(gè)實(shí)例，CSS橫向菜單藍(lán)綠色調(diào)的制作，最終效果：