In HTML, the symbols for ordered and unordered lists are defined using the Type attribute. To follow the principle of separating structure from style, list styles should be defined in CSS.
1, list item symbol list-style type
1. Define list item symbols
List item symbols are for OL or ul elements, not li elements. In OL, list item symbols take the following values:
Attribute values | instructions |
---|---|
decimal | Arabic numerals 1, 2, 3… (the default) |
lower-roman | Lower Roman numerals I, II, iii… |
upper-roman | Capital Roman numerals I, II, III… |
lower-alpha | Lowercase letters A, B, C…… |
upper-alpha | Uppercase Letters A, B, C…… |
In UL, the list item symbols are as follows:
Attribute values | instructions |
---|---|
disc | Solid circle (default) |
circle | The hollow circle |
square | A square |
Examples are as follows:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
ol{
list-style-type: upper-roman;
}
ul{
list-style-type: circle;
}
</style>
</head>
<body>
<h4>An ordered list</h4>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<h4>Unordered list</h4>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>
Copy the code
The browser displays:
2. Remove symbols from list items
When you do not want to use the symbol of a list item, you can use list-style-type:none to remove the symbol of a list item, as shown in the following example:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
ol.ul{
list-style-type: none;
}
</style>
</head>
<body>
<h4>An ordered list</h4>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<h4>Unordered list</h4>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>
Copy the code
How it looks in the browser:
List-style-image
List items can be replaced with images to make the site more beautiful, as shown in the following example:
<! DOCTYPEhtml>
<html>
<head>
<meta name="keywords" content="Personal homepage, HTML study notes"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="Learning Examples"/>
<meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
<style type="text/css">
ol.ul{
list-style-image: url("cat.svg")}</style>
</head>
<body>
<h4>An ordered list</h4>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<h4>Unordered list</h4>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>
Copy the code
In the browser it looks like this:
For symbols of list items, iconfont icon is more commonly used to achieve, recommend a good icon library: www.iconfont.cn/