css制作列表
使用无序列表（ul）
通过 <ul> 和 <li> 标签创建无序列表，结合 CSS 调整样式：
<ul class="custom-list">
<li>项目一</li>
<li>项目二</li>
</ul>.custom-list {
list-style-type: square; /* 修改标记类型（如 disc, circle, none） */
padding-left: 20px;
}
.custom-list li {
margin: 5px 0;
color: #333;
}使用有序列表（ol）
通过 <ol> 标签创建有序列表，自定义编号样式：
<ol class="numbered-list">
<li>步骤一</li>
<li>步骤二</li>
</ol>.numbered-list {
list-style-type: upper-roman; /* 可选：decimal, lower-alpha 等 */
counter-reset: section;
}
.numbered-list li::before {
content: counters(section, ".") " ";
counter-increment: section;
}自定义列表标记
用伪元素替换默认标记：
.custom-marker li {
list-style: none;
position: relative;
padding-left: 25px;
}
.custom-marker li::before {
content: "→";
position: absolute;
left: 0;
color: #ff5722;
}横向列表（导航栏）
将列表项水平排列：
.horizontal-list {
display: flex;
list-style: none;
gap: 15px;
}
.horizontal-list li {
padding: 8px 12px;
background: #f0f0f0;
border-radius: 4px;
}响应式列表
针对移动设备调整布局：
@media (max-width: 600px) {
.responsive-list li {
display: block;
width: 100%;
margin-bottom: 10px;
}
}嵌套列表样式
为多级列表设置差异化样式：
.nested-list ul {
list-style-type: circle;
margin-left: 20px;
}
.nested-list ul ul {
list-style-type: "- ";
}关键点：
list-style-type控制标记类型（如disc | circle | none）list-style-image可用图片作为标记- Flexbox/Grid 实现复杂布局
- 伪元素
::before/::after实现自定义设计
