当前位置：首页 > CSS

网页制作css 列表

2026-01-08 18:55:05CSS

创建CSS列表样式

使用CSS可以自定义HTML列表（有序列表<ol>和无序列表<ul>）的外观，包括项目符号、缩进、颜色等。以下是一些常见的列表样式方法：

基础列表样式 通过list-style-type属性修改项目符号或编号的样式：

ul {
  list-style-type: square; /* 方形符号 */
}
ol {
  list-style-type: upper-roman; /* 罗马数字编号 */
}

自定义项目符号图片 使用list-style-image替换默认符号为图片：

网页制作css 列表

ul {
  list-style-image: url('bullet.png');
}

控制列表布局 调整列表项的内外边距和缩进：

ul, ol {
  padding-left: 20px; /* 控制缩进 */
}
li {
  margin-bottom: 8px; /* 项间距 */
}

横向列表 将列表项改为水平排列：

网页制作css 列表

ul.horizontal {
  display: flex;
  list-style-type: none;
  padding-left: 0;
}
ul.horizontal li {
  margin-right: 15px;
}

高级自定义 完全隐藏默认符号并自定义内容：

ul.custom {
  list-style: none;
}
ul.custom li::before {
  content: "→"; /* 自定义符号 */
  color: #ff5733;
  margin-right: 10px;
}

常见应用场景

导航菜单 横向列表常用于导航栏：

nav ul {
  display: flex;
  list-style: none;
  background: #333;
}
nav li a {
  color: white;
  padding: 15px;
  display: block;
}

步骤指示器 有序列表可制作步骤流程：

ol.steps {
  counter-reset: step;
  list-style: none;
}
ol.steps li::before {
  counter-increment: step;
  content: counter(step);
  background: #4CAF50;
  color: white;
  border-radius: 50%;
  display: inline-block;
  width: 25px;
  text-align: center;
  margin-right: 10px;
}