网页制作css 列表

CSS 列表样式

CSS 提供了多种方式来美化 HTML 列表（有序列表 <ol> 和无序列表 <ul>），包括修改列表项标记、调整间距、自定义图标等。

修改列表项标记类型

无序列表默认使用实心圆点（disc），可以通过 list-style-type 修改为其他样式：

ul {
  list-style-type: square; /* 方块 */
}
ol {
  list-style-type: upper-roman; /* 大写罗马数字 */
}

可选值：disc | circle | square | decimal | lower-alpha | upper-roman 等。

使用自定义图片作为标记

通过 list-style-image 属性可替换为图片：

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

控制标记位置

list-style-position 决定标记位于列表项内容内部还是外部：

ul {
  list-style-position: inside; /* 标记与内容对齐 */
}

复合属性

list-style 可简写以上属性：

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

移除默认样式

清除默认标记和缩进：

ul, ol {
  list-style-type: none;
  padding-left: 0;
}

横向排列列表

通过 Flexbox 实现水平列表：

ul {
  display: flex;
  gap: 20px; /* 项间距 */
}

自定义编号样式

对于有序列表，可使用 counter-reset 和 counter-increment 实现复杂编号：

ol {
  counter-reset: section;
}
li::before {
  counter-increment: section;
  content: counters(section, ".") " "; /* 多级编号如 1.1 */
}

悬停效果

为列表项添加交互效果：

li:hover {
  background-color: #f0f0f0;
  transform: translateX(5px);
}

示例：带图标的横向导航

.nav-list {
  display: flex;
  gap: 30px;
  list-style: none;
}
.nav-item::before {
  content: "→";
  margin-right: 8px;
  color: #3498db;
}

通过组合这些属性，可以创建适应不同设计需求的列表样式。