DIV+CSS菜单实例教程之极致而简约的风格

时间:2008-11-30 10:47:53  来源:网翼网络收集  作者:  【背景色 】

今天我们继续看这方面的案例，这是一个极致而简约的风格。效果图如下：

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

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