CSS菜单实例：极致而简约的风格_DIV+CSS实例

教程Tag：暂无Tag,欢迎添加,赚取U币!

效果图如下：

　　HTML代码：

示例代码 [www.mb5u.com]

<ul id="nav">
<li><a href="http://www.mb5u.com/" id="current">MB5U.com 首页</a></li>
<li><a href="http://www.mb5u.com/">Div CSS教程</a></li>
<li><a href="http://www.mb5u.com/">CSS布局实例</a></li>
<li><a href="http://www.mb5u.com/">CSS2.0教程</a></li>
<li><a href="http://www.mb5u.com/">CSS酷站欣赏</a></li>
</ul>

　　CSS代码：

示例代码 [www.mb5u.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;
}

　　这款菜单的制作非常简单，但透露着一种简约的风格。我们在进行页面设计的时候，往往都喜欢别致的风格，但我们所需要考虑的是用户的感受，不同的站点类型应该营造出不同的风格气息，用户不但能获取信息，也有比较舒适的视觉感受。

　　看完整的运行效果：