css制作列表

2026-03-11 15:37:24CSS

无序列表制作

使用 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;
  margin-bottom: 5px;
  background-color: #f0f0f0;
  border-left: 3px solid #3498db; /* 左侧装饰线 */
}

有序列表制作

使用 ol 和 li 标签创建有序列表，自定义编号样式：

css制作列表

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

.numbered-list {
  counter-reset: my-counter; /* 初始化计数器 */
  padding-left: 0;
}
.numbered-list li {
  counter-increment: my-counter; /* 计数器递增 */
  list-style-type: none;
  margin-bottom: 10px;
}
.numbered-list li::before {
  content: counter(my-counter) ". "; /* 自定义编号格式 */
  color: #e74c3c;
  font-weight: bold;
}

自定义列表符号

通过 ::before 伪元素或 list-style-image 替换默认符号：

css制作列表

.custom-bullet li::before {
  content: "•";
  color: #2ecc71;
  padding-right: 10px;
}
/* 或使用图片 */
.image-list {
  list-style-image: url('bullet.png');
}

水平排列列表

将列表项转为行内或弹性布局实现横向排列：

.horizontal-list {
  display: flex;
  gap: 15px; /* 项间距 */
}
.horizontal-list li {
  display: inline-block;
  padding: 5px 10px;
  background: #f8f9fa;
}

响应式列表设计

结合媒体查询适配不同屏幕尺寸：

.responsive-list li {
  padding: 12px;
  font-size: 16px;
}
@media (max-width: 600px) {
  .responsive-list li {
    padding: 8px;
    font-size: 14px;
  }
}