The list styles in css are: 1. css ordered list [ol] and css unordered list [ul]; 2. css list label style [list-style-type]; 3. css label style Display mode [list-style-position].
The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.
The list style in css is:
1, css ordered list (ol) and css unordered list (ul)
list.html <!doctypehtml><html><head> <metacharset="utf-8"> <title>列表样式</title> <linkhref="box.css"type="text/css"rel="stylesheet"></head><body> <p> <ul> <li>水果<ol> <li>苹果</li> <li>香蕉</li> <li>梨子</li> </ol> </li> </ul> </p></body></html>
2. css list label style list-style-type
Attribute value:
circle;Open circle
Disc;Solid circle
Decimal;Number
list.css
ul>li{
list-style-type:circle;
}
ul>li>ol>li{
list-style-type:disc;
}
3. The display method of css label style list-style-position
Attribute value: outside (outside the text, default)
inside (with the text)
list.css
ul{
text-align:center;
list-style-position:outside;
}
ul>li{
list-style-type:circle;
}
ul>li>ol>li{
list-style-type:disc;
}Related tutorial recommendations: CSS Video Tutorial
The above is the detailed content of What is the list style in css. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
