今天我们继续看这方面的案例,这是一个极致而简约的风格。效果图如下:
HTML代码:
Example Source Code [
<ulid=\"nav\">
<li><ahref=../../\"http://www.webyi.com/\"id=\"current\">webyi.com首页</a></li>
<li><ahref=../../\"http://www.webyi.com/\">Div+CSS教程</a></li>
<li><ahref=../../\"http://www.webyi.com/\">CSS布局实例</a></li>
<li><ahref=../../\"http://www.webyi.com/\">CSS2.0教程</a></li>
<li><ahref=../../\"http://www.webyi.com/\">CSS酷站欣赏</a></li>
</ul>
CSS代码:
Example Source Code
*{
font-size:12px;
text-align:center;
}
#nav{
width:700px;
margin:20pxauto0auto;
}
#navli{
display:inline;
list-style-type:none;
}
#navlia:link,#navlia:visited{
float:left;
padding:3px10px;
text-decoration:none;
color:#666;
border-bottom:1pxsolid#fff;
}
#navlia:hover{
color:#000;
border-bottom:1pxsolid#06f;
}
#navlia#current{
color:#666;
border-bottom:1pxsolid#f60;
}
这款菜单的制作非常简单,但透露着一种简约的风格。我们在进行页面设计的时候,往往都喜欢别致的风格,但我们所需要考虑的是用户的感受,不同的站点类型应该营造出不同的风格气息,用户不但能获取信息,也有比较舒服的视觉感受。
