css给你灵感-border立体菜单

午梅2008-05-23 11:49:56

  希望以下小小的效果,能给做网站设计的你提供些许灵感。

  鼠标移到菜单上的时候,菜单变成了立体的,这种效果我就觉得也许已经过时,不过经过设计师们的创意,我相信也许你能把它变成更实用更漂亮。这种效果做起来真是超级简单。先看看效果吧。

  为了使菜单产生立体效果,实际上只要把菜单的上边框线和左边框设置为亮色,右边框线和下边框线设置为暗色,就能产生立体效果了。实际上的配色要你设计了。精通css的你,一看就知道是怎么做的了,确实很简单,看看代码吧:

<style type="text/css" media="screen">
* {
    border:0;
    margin:0;
    padding:0;
}

#menu_tab{
    height:32px;
    line-height:32px;
    background:#ff9900;
    font-size:14px;
    padding-left:8px;
}

#menu_tab a{
    display:block;
    float:left;
    padding:0 12px;
    line-height:24px;
    color:#000;
    margin-top:2px;
    border:1px solid;
    border-color:#FFBC79 #D56A00 #D56A00 #FFBC79;
    }

#menu_tab a:hover{
    border:1px solid;
    border-color:#fff #000 #000 #fff;
    background-color:#ffaa00;
    color:#fff;
}
</style>

<li id="menu_tab">

        <a href="#">网站标准</a>
        <a href="#">高级css</a>
        <a href="#">xhtml</a>

</li>

上一篇:高级CSS技巧-Tab选项卡导航菜单
下一篇:css给你灵感-漂亮的鼠标悬停图片说明

有什么想说的吗?