CSS制作li样式
修改列表项样式
通过CSS可以自定义<li>元素的样式，包括项目符号、间距、颜色等。以下是几种常见方法：
修改项目符号类型
使用list-style-type属性可以更改列表项前的标记样式：
ul {
list-style-type: square; /* 实心方块 */
}
ol {
list-style-type: upper-roman; /* 大写罗马数字 */
}可选值包括disc(默认实心圆)、circle(空心圆)、square(方块)、decimal(数字)、lower-alpha(小写字母)等。
使用自定义图片作为项目符号
通过list-style-image属性可以使用图片替代默认符号：
ul {
list-style-image: url('bullet.png');
}控制项目符号位置
list-style-position属性决定项目符号位于列表项内容内部还是外部：
ul {
list-style-position: inside; /* 符号在内容框内 */
}完全移除项目符号
设置list-style: none并配合padding/margin调整间距：
ul {
list-style: none;
padding-left: 0;
}
li {
padding-left: 1em;
text-indent: -1em;
}创建自定义编号样式
对有序列表可使用counter-reset和counter-increment实现复杂编号：
ol {
counter-reset: section;
list-style: none;
}
li::before {
counter-increment: section;
content: counters(section, ".") " ";
}悬停和选中效果
为列表项添加交互状态：
li:hover {
background-color: #f0f0f0;
}
li:active {
color: blue;
}多列列表布局
使用CSS多列属性实现分栏显示：
ul {
column-count: 3;
column-gap: 2em;
}响应式列表设计
通过媒体查询适配不同设备：
@media (max-width: 600px) {
li {
font-size: 14px;
padding: 5px 0;
}
}这些方法可以单独使用或组合应用，根据具体设计需求调整参数值。对于更复杂的样式，可结合伪元素(::before/::after)实现完全自定义的列表项外观。
