这段 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:定义最后一组菜单项鼠标悬停时的背景颜色。
各位互联网搭子,要是这篇文章成功引起了你的注意,别犹豫,关注、点赞、评论、分享走一波,让我们把这份默契延续下去,一起在知识的海洋里乘风破浪!