Home > Article > Web Front-end > Detailed explanation of custom list item symbol list-style-image
Detailed explanation of custom list item symbol list-style-image
- 云罗郡主forward
- 2018-11-12 16:19:444936browse
This article brings you a detailed explanation of the custom list item symbol list-style-image. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. List-style-image attribute
Whether it is an ordered list or an unordered list, they have their own list item symbols. But the default list item symbols are relatively ugly. So if we want to customize the list item symbols, how to achieve it?
In CSS, we can use the list-style-image attribute to customize the list item symbol.
Syntax:
list-style-image:url(图像地址);
Description:
The image address can be a relative address or an absolute address. [Recommended reading: Relative positioning and absolute positioning in html]
Example:
We customize the following small icon as a list item symbol ：
For example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>list-style-image属性</title>
<style type="text/css">
ul{list-style-image:url("https://img.php.cn/upload/9-3-1.png");}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>The effect is as follows:
The above is the custom list item A complete introduction to the detailed explanation of the symbol list-style-image. If you want to know more about Html5 tutorial, please pay attention to the PHP Chinese website.
The above is the detailed content of Detailed explanation of custom list item symbol list-style-image. For more information, please follow other related articles on the PHP Chinese website!