网页制作css 列表

基础列表样式

使用 list-style-type 属性可以设置列表项标记的类型。常见的值包括：

• disc：实心圆点（默认）
• circle：空心圆点
• square：实心方块
• decimal：数字
• lower-alpha：小写字母
• upper-alpha：大写字母

ul {
  list-style-type: square;
}

ol {
  list-style-type: lower-alpha;
}

自定义列表标记

使用 list-style-image 属性可以将列表项标记替换为自定义图片。

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

列表标记位置

通过 list-style-position 属性可以控制列表标记的位置：

• inside：标记位于列表项内容内部
• outside：标记位于列表项内容外部（默认）

ul {
  list-style-position: inside;
}

简写属性

list-style 是上述属性的简写形式，可以同时设置类型、图片和位置。

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

移除默认样式

要完全移除列表的默认样式，可以将所有相关属性设置为 none。

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

水平列表

通过 CSS 可以将垂直列表转换为水平导航菜单。

ul.horizontal {
  display: flex;
  gap: 1rem;
}

高级样式技巧

使用伪元素为自定义列表添加更复杂的样式。

ul.custom {
  list-style: none;
}

ul.custom li::before {
  content: "→";
  color: blue;
  margin-right: 0.5em;
}

响应式列表

使用媒体查询为不同屏幕尺寸调整列表样式。

@media (max-width: 600px) {
  ul.responsive {
    flex-direction: column;
  }
}

嵌套列表样式

为不同层级的嵌套列表设置不同的样式。

ul {
  list-style-type: disc;
}

ul ul {
  list-style-type: circle;
}

ul ul ul {
  list-style-type: square;
}

动画效果

为列表项添加悬停效果增强交互性。

li {
  transition: all 0.3s ease;
}

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