CSS3实现立体菜单

html结构:

<div class="nav">
        <a href="#" class="highlight">Home</a>
        <a href="#">About</a>
        <a href="#">Servics</a>
        <a href="#">Portfolio</a>
        <a href="#">Blog</a>
        <a href="#">Contact</a>
    </div>

CSS3:

* {
            margin:0;
            padding: 0;
            font-family: 'Microsoft Yahei'
        }
        a {
            color: #fff;
            text-decoration: none;
        }
        body {
            background-color: #222930;
        }
        .nav {
            margin:10%;
        }
        .nav a {
            padding: 15px 20px;
            margin-left: -4px;
            border: 1px solid #121212;
            border-right: none;
            color: #777;
            cursor: pointer;
            font-size: 14px;
            box-shadow: 0 2px 3px rgba(255,255,255,0.1) inset,
                        0 1px 0px rgba(255,255,255,0.1) ;
        }
        .nav a:first-child {
            border-radius:6px 0 0 6px;
        }.nav a:last-child {
            border-radius: 0 6px 6px 0;
            border-right: 1px solid #121212;
        }
        .nav a.highlight {
            color: #fff;
        }

截图:

阅读更多
个人分类: css3
想对作者说点什么? 我来说一句

css立体菜单

立体菜单    

teresa502 teresa502

2010-07-16 21:21:00

阅读数:474

没有更多推荐了,返回首页

不良信息举报

CSS3实现立体菜单

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭