当前位置：首页 > CSS

css制作网页列表

2026-04-02 13:40:46CSS

使用无序列表（ul）和有序列表（ol）

通过HTML的<ul>（无序列表）和<ol>（有序列表）标签创建基础列表结构，CSS控制样式：

<ul class="custom-list">
  <li>项目1</li>
  <li>项目2</li>
</ul>

.custom-list {
  list-style-type: none; /* 移除默认标记 */
  padding-left: 0;
}
.custom-list li {
  padding: 8px 16px;
  border-bottom: 1px solid #eee;
}

自定义列表标记

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

.custom-list li::before {
  content: "•"; 
  color: #ff6b6b;
  margin-right: 10px;
}

或使用图标字体：

css制作网页列表

.custom-list li::before {
  font-family: "Font Awesome";
  content: "\f054"; /* 右箭头图标 */
}

响应式列表布局

通过Flexbox或Grid实现多列列表：

.responsive-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

悬停交互效果

添加悬停状态提升用户体验：

css制作网页列表

.custom-list li:hover {
  background-color: #f5f5f5;
  transform: translateX(5px);
  transition: all 0.3s ease;
}

带分隔线的列表

创建视觉分隔效果：

.divider-list li {
  border-left: 3px solid #4CAF50;
  padding-left: 15px;
  margin: 10px 0;
}

数字序号样式增强

美化有序列表的数字：

ol.custom-numbers {
  counter-reset: item;
}
ol.custom-numbers li {
  counter-increment: item;
}
ol.custom-numbers li::before {
  content: counter(item);
  background: #6200ea;
  color: white;
  border-radius: 50%;
  display: inline-block;
  width: 24px;
  text-align: center;
  margin-right: 10px;
}

多级嵌套列表

处理层级缩进和样式：

.nested-list ul {
  padding-left: 20px;
}
.nested-list li {
  position: relative;
}
.nested-list li::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 10px;
  width: 6px;
  height: 6px;
  background: #333;
}