css制作列表

无序列表制作

使用 ul 和 li 标签创建无序列表，通过 CSS 自定义样式：

<ul class="custom-list">
  <li>项目一</li>
  <li>项目二</li>
</ul>

.custom-list {
  list-style-type: none; /* 移除默认圆点 */
  padding-left: 0;
}
.custom-list li {
  padding: 8px 0;
  border-bottom: 1px dashed #ccc; /* 添加虚线分隔线 */
}

有序列表样式调整

通过 ol 和 counter 属性自定义序号样式：

<ol class="numbered-list">
  <li>步骤一</li>
  <li>步骤二</li>
</ol>

.numbered-list {
  counter-reset: step-counter;
  list-style: none;
}
.numbered-list li::before {
  counter-increment: step-counter;
  content: counter(step-counter) ". "; /* 添加序号和点 */
  color: #ff6b6b;
  font-weight: bold;
}

横向排列列表

使用 Flexbox 或 Grid 实现水平列表：

.horizontal-list {
  display: flex;
  gap: 20px; /* 项目间距 */
  list-style: none;
}
.horizontal-list li {
  background: #f0f0f0;
  padding: 10px 15px;
  border-radius: 4px;
}

列表动画效果

为列表项添加悬停交互效果：

.animated-list li {
  transition: transform 0.3s, background 0.3s;
}
.animated-list li:hover {
  transform: translateX(10px);
  background: #e3f2fd;
}

嵌套列表样式

自定义多级嵌套列表的缩进和符号：

.nested-list ul {
  list-style-type: circle; /* 二级列表符号 */
  margin-left: 20px;
}
.nested-list ul ul {
  list-style-type: square; /* 三级列表符号 */
}

关键点：

• 使用 list-style-type 修改项目符号（如 disc、square、none）。
• 通过伪元素 ::before 完全自定义序号或图标。
• Flexbox/Grid 布局适合导航菜单等横向列表场景。