Home >Web Front-end >Front-end Q&A >How to use css list-style-image attribute
How to use css list-style-image attribute
- 青灯夜游Original
- 2019-05-29 11:20:083643browse
css The list-style-image attribute is used to specify an image as a flag for ordered or unordered list items. The position of the image markup is usually controlled using the list-style-position attribute. Always specify a "list-style-type" attribute in case the image is not available.
How to use the css list-style-image attribute?
The list-style-image attribute replaces the markup of a list item with an image.
Basic syntax:
list-style-image:URL|none;
Attribute value:
● URL: The path to the image.
● none: Default. No graphics are displayed.
Description: This attribute specifies the image as an ordered or unordered list item flag. Typically the list-style-position property is used to control the placement of images relative to the list item's content.
Note: Always specify a "list-style-type" attribute in case the image is not available. All browsers support the list-style-image attribute.
css list-style-image attribute example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul
{
list-style-image:url('sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>Rendering:
The above is the detailed content of How to use css list-style-image attribute. For more information, please follow other related articles on the PHP Chinese website!