CSS菜單實例：極致而簡約的風格_DIV+CSS實例
教程Tag：暫無Tag,歡迎添加,賺取U幣!
效果圖如下：
HTML代碼：
CSS代碼：
這款菜單的制作非常簡單，但透露著一種簡約的風格。我們在進行頁面設計的時候，往往都喜歡別致的風格，但我們所需要考慮的是用戶的感受，不同的站點類型應該營造出不同的風格氣息，用戶不但能獲取信息，也有比較舒適的視覺感受。
看完整的運行效果：
代碼調試框 [m.ghpqjb.com]
[ 可先修改部分代碼 再運行查看效果 ]
HTML代碼：
示例代碼 [m.ghpqjb.com]
<ul id="nav">
<li><a href="http://m.ghpqjb.com/" id="current">MB5U.com 首頁</a></li>
<li><a href="http://m.ghpqjb.com/">Div CSS教程</a></li>
<li><a href="http://m.ghpqjb.com/">CSS布局實例</a></li>
<li><a href="http://m.ghpqjb.com/">CSS2.0教程</a></li>
<li><a href="http://m.ghpqjb.com/">CSS酷站欣賞</a></li>
</ul>
<li><a href="http://m.ghpqjb.com/" id="current">MB5U.com 首頁</a></li>
<li><a href="http://m.ghpqjb.com/">Div CSS教程</a></li>
<li><a href="http://m.ghpqjb.com/">CSS布局實例</a></li>
<li><a href="http://m.ghpqjb.com/">CSS2.0教程</a></li>
<li><a href="http://m.ghpqjb.com/">CSS酷站欣賞</a></li>
</ul>
CSS代碼：
示例代碼 [m.ghpqjb.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;
}
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;
}
這款菜單的制作非常簡單，但透露著一種簡約的風格。我們在進行頁面設計的時候，往往都喜歡別致的風格，但我們所需要考慮的是用戶的感受，不同的站點類型應該營造出不同的風格氣息，用戶不但能獲取信息，也有比較舒適的視覺感受。
看完整的運行效果：
代碼調試框 [m.ghpqjb.com][ 可先修改部分代碼 再運行查看效果 ]
相關DIV+CSS實例：
- 相關鏈接：
- 教程說明：
DIV+CSS實例-CSS菜單實例：極致而簡約的風格
。