CSS菜單實例：極致而簡約的風格_DIV+CSS實例

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

效果圖如下：

　　HTML代碼：

示例代碼 [www.wf0088.com]

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

　　CSS代碼：

示例代碼 [www.wf0088.com]

* {
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;
}

　　這款菜單的制作非常簡單，但透露著一種簡約的風格。我們在進行頁面設計的時候，往往都喜歡別致的風格，但我們所需要考慮的是用戶的感受，不同的站點類型應該營造出不同的風格氣息，用戶不但能獲取信息，也有比較舒適的視覺感受。

　　看完整的運行效果：