CSS制作li样式

CSS制作li样式的方法

基础样式设置 使用list-style-type属性可以改变li的标记样式，常见值包括disc（实心圆点）、circle（空心圆）、square（方块）、decimal（数字）等。例如：

ul {
  list-style-type: square;
}

自定义标记图片 通过list-style-image属性可以使用自定义图片作为标记：

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

控制标记位置 list-style-position属性决定标记在列表项内部(inside)还是外部(outside)：

ul {
  list-style-position: inside;
}

复合属性 list-style是简写属性，可同时设置类型、图片和位置：

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

完全移除默认样式 要完全移除列表标记和缩进：

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

高级自定义样式 使用伪元素::before或::marker实现更复杂的自定义样式：

li::before {
  content: "→";
  color: red;
  margin-right: 10px;
}

响应式列表设计 结合媒体查询为不同屏幕尺寸设置不同列表样式：

@media (max-width: 600px) {
  ul {
    list-style-type: none;
  }
  li {
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
  }
}