CSS3实现立体菜单

最新推荐文章于 2024-04-06 09:01:22 发布

wukongk

最新推荐文章于 2024-04-06 09:01:22 发布

阅读量628

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/u013742084/article/details/51548556

版权

本文介绍了如何利用CSS3的特性来实现具有立体效果的菜单。通过html结构定义菜单的基础布局，然后用CSS3的样式规则，如阴影、边框和过渡效果，赋予菜单立体感和交互动态。

摘要由CSDN通过智能技术生成

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;