有趣的css —— li 标签的样式操作（含自定义）
以下是一个简单的HTML和CSS示例，演示了如何为li标签添加自定义样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom List Item Style</title>
<style>
ul.custom-list {
list-style-type: none; /* 移除列表的标记（例如圆点） */
padding-left: 0; /* 移除列表的内边距 */
}
ul.custom-list li {
padding: 10px; /* 添加列表项的内边距 */
margin-bottom: 5px; /* 添加列表项之间的间距 */
background-color: #f0f0f0; /* 设置列表项的背景颜色 */
border-radius: 5px; /* 添加圆角边框 */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}
ul.custom-list li:hover {
background-color: #e9e9e9; /* 鼠标悬停时改变背景颜色 */
}
</style>
</head>
<body>
<ul class="custom-list">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
</body>
</html>这段代码演示了如何为ul元素添加一个自定义的class属性（这里是custom-list），然后在CSS中针对该类定义样式。同时，为li标签添加了自定义的内边距、背景颜色、圆角和阴影等样式，以及一个鼠标悬停效果。这样的实践可以帮助开发者学习如何对列表元素进行样式定制，从而创建更加个性化的网页布局。
评论已关闭