CSS菜單實(shí)例：極致而簡(jiǎn)約的風(fēng)格_DIV+CSS實(shí)例

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

效果圖如下：

　　HTML代碼：

示例代碼 [www.hl5o.cn]

<ul id="nav">
<li><a href="http://www.hl5o.cn/" id="current">MB5U.com 首頁(yè)</a></li>
<li><a href="http://www.hl5o.cn/">Div CSS教程</a></li>
<li><a href="http://www.hl5o.cn/">CSS布局實(shí)例</a></li>
<li><a href="http://www.hl5o.cn/">CSS2.0教程</a></li>
<li><a href="http://www.hl5o.cn/">CSS酷站欣賞</a></li>
</ul>

　　CSS代碼：

示例代碼 [www.hl5o.cn]

* {
font-size:12px;
text-align:center;
}
#nav {
width:700px;
margin:20px auto 0 auto;
}
#nav li {
display: inline;
list-style-type: none;
}
#nav li a:link,#nav li a:visited {
float:left;
padding:3px 10px;
text-decoration: none;
color:#666;
border-bottom:1px solid #fff;
}
#nav li a:hover {
color:#000;
border-bottom:1px solid #06f;
}
#nav li a#current {
color:#666;
border-bottom:1px solid #f60;
}

　　這款菜單的制作非常簡(jiǎn)單，但透露著一種簡(jiǎn)約的風(fēng)格。我們?cè)谶M(jìn)行頁(yè)面設(shè)計(jì)的時(shí)候，往往都喜歡別致的風(fēng)格，但我們所需要考慮的是用戶的感受，不同的站點(diǎn)類型應(yīng)該營(yíng)造出不同的風(fēng)格氣息，用戶不但能獲取信息，也有比較舒適的視覺(jué)感受。

　　看完整的運(yùn)行效果：