css列表制作

无序列表制作

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

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

.custom-list {
  list-style-type: none; /* 移除默认圆点 */
  padding-left: 20px;
}
.custom-list li {
  margin-bottom: 8px;
  color: #333;
}

有序列表制作

通过 ol 标签创建有序列表，自定义编号样式：

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

.numbered-list {
  list-style-type: none; /* 移除默认数字 */
  counter-reset: step-counter;
}
.numbered-list li::before {
  counter-increment: step-counter;
  content: counter(step-counter) ". "; /* 自定义编号格式 */
  font-weight: bold;
}

自定义列表符号

使用 ::before 伪元素替换默认符号：

.custom-list li::before {
  content: "•"; /* 或使用 Unicode 符号 */
  color: #ff5733;
  margin-right: 10px;
}

横向列表（导航栏）

通过 display: flex 实现横向排列：

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

嵌套列表样式

为多级列表设置层级缩进和样式：

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

悬停交互效果

添加悬停动画增强用户体验：

.interactive-list li {
  transition: transform 0.2s;
}
.interactive-list li:hover {
  transform: translateX(5px);
  color: #0066cc;
}

关键点：

• 使用 list-style-type 控制符号类型（如 square、decimal）。
• 通过伪元素 ::before 实现高度自定义。
• 结合 Flexbox 或 Grid 布局实现复杂排列。