css设置悬浮列表样式_如何使用CSS设置列表样式

css设置悬浮列表样式

Lists are a very important part of many web pages.

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

CSS can style them using several properties.

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

list-style-type is used to set a predefined marker to be used by the list:

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

li {
  list-style-type: square;
}

We have lots of possible values, which you can see here https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type with examples of their appearance. Some of the most popular ones are disc, circle, square and none.

我们有很多可能的值，您可以在这里https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type以及它们的外观示例进行查看。 最受欢迎的是disc ， circle ， square和none circle 。

list-style-image is used to use a custom image as a marker, when a predefined marker is not appropriate:

当预定义的标记不适合使用list-style-image来将自定义图像用作标记时：

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

list-style-position lets you add the marker outside (the default) or inside of the list content, in the flow of the page rather than outside of it

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

li {
  list-style-position: inside;
}

The list-style shorthand property lets us specify all those properties in the same line:

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

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

翻译自: https://flaviocopes.com/css-lists/

css设置悬浮列表样式