如何使用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教程: