无序列表CSS代码主要通过list-style属性控制样式，核心属性包括list-style-type，用于设置列表项标记类型，如默认disc（实心圆）、circle（空心圆）、square（实心方）等；list-style-position定义标记位置，可选inside（文本内）或outside（文本外）；list-style-image可替换标记为自定义图片，实际开发中常通过margin和padding调整列表间距，或用::before伪元素实现复杂标记样式，清除默认样式时，可设置list-style: none后自定义标记。
无序列表的CSS完全指南：从基础样式到高级设计
无序列表（<ul>）是HTML中展示非序信息的核心元素，广泛用于导航菜单、产品目录、注意事项等场景，通过CSS的精细控制，我们可以突破默认样式的限制，从基础标记符号到复杂交互效果，打造兼具美观与功能性的列表组件，本文将系统解析无序列表的CSS实现路径，涵盖基础配置、进阶技巧及设计实践。
无序列表的HTML基础结构
在应用CSS样式前,需明确无序列表的标准HTML结构：
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>
浏览器默认为<ul>添加左侧缩进，并为每个<li>显示实心圆点（•）作为标记，CSS的核心价值在于覆盖这些默认样式，实现高度自定义的视觉呈现。
基础样式控制：列表标记精修
列表标记（即<li>前的符号）是视觉识别的关键，通过list-style系列属性，可灵活控制标记的形态与位置。
标记类型定制：list-style-type
list-style-type属性定义标记形状，常用值包括：
disc：实心圆点（默认）circle：空心圆圈square：实心方块none：隐藏标记- 扩展值：如
decimal-leading-zero（前导零数字）、hebrew（希伯来数字）等
实战案例：
ul.custom-list {
list-style-type: square; /* 实心方块标记 */
}
效果：所有列表项前显示■符号，替代默认的•。
标记位置控制：list-style-position
该属性决定标记与内容的相对位置：
outside：标记在内容左侧（默认，不影响内容缩进）inside：标记融入内容流，内容向右缩进
应用场景：
ul.inline-list {
list-style-type: circle;
list-style-position: inside; /* 标记与内容同行 */
}
效果：标记（○）与内容在同一行，适合内联式列表设计。
图片标记实现：list-style-image
当需要自定义图标时,可使用图片替换默认标记：
ul.icon-list {
list-style-image: url('assets/checkmark.svg');
}
关键提示：为确保健壮性，建议设置兜底样式：
ul.icon-list {
list-style-image: url('assets/checkmark.svg');
list-style-type: disc; /* 图片加载失败时回退 */
}
进阶设计：完全自定义列表样式
突破基础限制时,可采用"清除默认+伪元素装饰"的进阶方案。
清除默认样式
通过重置属性移除浏览器默认样式：
ul.reset-list {
list-style: none; /* 清除所有标记 */
margin: 0; /* 移除外边距 */
padding: 0; /* 移除内边距 */
}
伪元素装饰技巧
利用:before伪元素添加自定义装饰：
ul.custom-list li {
position: relative;
padding-left: 20px; /* 为标记留出空间 */
}
ul.custom-list li::before {
content: "✓"; /* 自定义字符 */
position: absolute;
left: 0;
color: #4CAF50; /* 绿色标记 */
font-weight: bold;
}
效果：列表项前显示绿色加粗的✓标记，内容自动缩进。
复杂标记实现方案
（1）SVG图标标记
ul.svg-list li::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
margin-right: 8px;
}
（2）图标字体方案（Font Awesome）
首先引入图标库：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
CSS实现：
ul.fa-list li::before {
content: "\f005"; /* 星标图标 */
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: #FFD700; /* 金色 */
margin-right: 10px;
}
布局与交互优化
列表项间距与对齐控制
ul.card-list {
list-style: none;
