CSS菜單實例：極致而簡約的風格-CSS布局實例

來源:52CSS 作者:52CSS更新時間:2007-04-04點擊:

效果圖如下：

　　HTML代碼：

Example Source Code [mid.lt263.com/mb]

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

　　CSS代碼：

Example Source Code [mid.lt263.com/mb]

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

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

　　看完整的運行效果：

Source Code to Run [mid.lt263.com/mb]

[ 可先修改部分代碼再運行查看效果 ]

CSS布局實例

CSS菜單實例：極致而簡約的風格-CSS布局實例

最新CSS布局實例

推薦CSS布局實例