HTML&CSS ：颜值爆表的导航菜单

前端Hardy
148 阅读4分钟

这段 HTML 和 CSS 代码实现了一个具有现代感的卡片式界面，展示了多个带有图标的菜单选项。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .card {
            width: 200px;
            background-color: rgba(36, 40, 50, 1);
            background-image: linear-gradient(139deg,
                    rgba(36, 40, 50, 1) 0%,
                    rgba(36, 40, 50, 1) 0%,
                    rgba(37, 28, 40, 1) 100%);
            border-radius: 10px;
            padding: 15px 0px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .card .separator {
            border-top: 1.5px solid #42434a;
        }

        .card .list {
            list-style-type: none;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 0px 10px;
            margin: 0;
        }

        .card .list .element {
            display: flex;
            align-items: center;
            color: #7e8590;
            gap: 10px;
            transition: all 0.3s ease-out;
            padding: 4px 7px;
            border-radius: 6px;
            cursor: pointer;
        }

        .card .list .element svg {
            width: 19px;
            height: 19px;
            transition: all 0.3s ease-out;
        }

        .card .list .element .label {
            font-weight: 600;
            margin: 0;
            padding: 0;
        }

        .card .list .element:hover {
            background-color: #5353ff;
            color: #ffffff;
            transform: translate(1px, -1px);
        }

        .card .list .delete:hover {
            background-color: #8e2a2a;
        }

        .card .list .element:active {
            transform: scale(0.99);
        }

        .card .list:not(:last-child) .element:hover svg {
            stroke: #ffffff;
        }

        .card .list:last-child svg {
            stroke: #bd89ff;
        }

        .card .list:last-child .element {
            color: #bd89ff;
        }

        .card .list:last-child .element:hover {
            background-color: rgba(56, 45, 71, 0.836);
        }
    </style>
</head>

<body>
    <div class="card">
        <ul class="list">
            <li class="element">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none"
                    stroke="#7e8590" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="lucide lucide-pencil">
                    <path
                        d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z">
                    </path>
                    <path d="m15 5 4 4"></path>
                </svg>
                <p class="label">Rename</p>
            </li>
            <li class="element">
                <svg class="lucide lucide-user-round-plus" stroke-linejoin="round" stroke-linecap="round"
                    stroke-width="2" stroke="#7e8590" fill="none" viewBox="0 0 24 24" height="24" width="24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 21a8 8 0 0 1 13.292-6"></path>
                    <circle r="5" cy="8" cx="10"></circle>
                    <path d="M19 16v6"></path>
                    <path d="M22 19h-6"></path>
                </svg>
                <p class="label">Add Member</p>
            </li>
        </ul>
        <div class="separator"></div>
        <ul class="list">
            <li class="element">
                <svg class="lucide lucide-settings" stroke-linejoin="round" stroke-linecap="round" stroke-width="2"
                    stroke="#7e8590" fill="none" viewBox="0 0 24 24" height="24" width="24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z">
                    </path>
                    <circle r="3" cy="12" cx="12"></circle>
                </svg>
                <p class="label">Settings</p>
            </li>
            <li class="element delete">
                <svg class="lucide lucide-trash-2" stroke-linejoin="round" stroke-linecap="round" stroke-width="2"
                    stroke="#7e8590" fill="none" viewBox="0 0 24 24" height="24" width="24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 6h18"></path>
                    <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                    <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
                    <line y2="17" y1="11" x2="10" x1="10"></line>
                    <line y2="17" y1="11" x2="14" x1="14"></line>
                </svg>
                <p class="label">Delete</p>
            </li>
        </ul>
        <div class="separator"></div>
        <ul class="list">
            <li class="element">
                <svg class="lucide lucide-users-round" stroke-linejoin="round" stroke-linecap="round" stroke-width="2"
                    stroke="#7e8590" fill="none" viewBox="0 0 24 24" height="24" width="24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 21a8 8 0 0 0-16 0"></path>
                    <circle r="5" cy="8" cx="10"></circle>
                    <path d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"></path>
                </svg>
                <p class="label">Team Access</p>
            </li>
        </ul>
    </div>

</body>

</html>

HTML 结构

  • card：定义一个卡片容器，用于包裹所有的菜单项和分隔线。
  • list：定义一组菜单项，每个 ul 包含若干个 li 元素。
  • element：定义一个菜单项，包含一个 SVG 图标和一个文本标签 label。
  • separator：定义分隔线，用于分隔不同的菜单组。

CSS 样式

  • body：设置页面的整体布局，使卡片居中显示。
  • .card：定义卡片的样式，包括宽度、背景颜色、渐变效果、圆角、内边距和子元素的排列方式。
  • .card .separator：定义分隔线的样式，使用 border-top 创建一条细线。
  • .card .list：定义菜单项组的样式，包括移除默认列表样式、垂直排列列表项、设置内边距和间距。
  • .card .list .element：定义菜单项的样式，包括布局、颜色、间距、过渡效果、内边距和圆角。
  • .card .list .element svg：定义 SVG 图标的样式，包括宽度、高度和过渡效果。
  • .card .list .element .label：定义文本标签的样式，包括加粗字体和移除外边距。
  • .card .list .element:hover：定义菜单项鼠标悬停时的样式，包括背景颜色、文字颜色和位移效果。
  • .card .list .delete:hover：定义“删除”按钮鼠标悬停时的样式，背景颜色为红色。
  • .card .list .element:active：定义菜单项鼠标点击时的样式，轻微缩放效果。
  • .card .list:not(:last-child) .element:hover svg：定义非最后一组菜单项的 SVG 图标在鼠标悬停时的颜色。
  • .card .list:last-child svg：定义最后一组菜单项的 SVG 图标颜色。
  • .card .list:last-child .element：定义最后一组菜单项的文字颜色。
  • .card .list:last-child .element:hover：定义最后一组菜单项鼠标悬停时的背景颜色。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！

avatar
文章
阅读
粉丝