如何使用CSS设置列表样式

用CSS样式列表

列表是许多网页中非常重要的一部分。

CSS可以使用多个属性来设置样式。

list-style-type用于设置列表要使用的预定义标记:

li {
  list-style-type: square;
}

我们有很多可能的值,您可以在这里看到https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-type并附有外观示例。一些最受欢迎的是disccirclesquarenone

list-style-image当预定义的标记不合适时,用于将自定义图像用作标记:

li {
  list-style-image: url(list-image.png);
}

list-style-position让您添加标记outside(默认)或inside列表内容中的内容,在页面流中而不是在页面流之外

li {
  list-style-position: inside;
}

list-style简写属性使我们可以在同一行中指定所有这些属性:

li {
  list-style: url(list-image.png) inside;
}

免费下载我的CSS手册


更多CSS教程: