CSS List
CSS list properties function as follows:
Set different list items to be marked as ordered List
Set different list items marked as unordered list
Set list items marked as images
List
In HTML, there are two types of lists:
Unordered list - list items are marked with special graphics (such as small black dots, small boxes, etc.)
Ordered list - list items are marked with numbers or letters
Using CSS, the list can be further styled and images can be used as list item markers.
Different list item markers
The list-style-type attribute specifies the type of list item marker: :
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>无序列表实例:</p>
<ul class="a">
<li>香蕉</li>
<li>苹果</li>
<li>橙子</li>
</ul>
<ul class="b">
<li>香蕉</li>
<li>苹果</li>
<li>橙子</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
<li>香蕉</li>
<li>苹果</li>
<li>橙子</li>
</ol>
<ol class="d">
<li>香蕉</li>
<li>苹果</li>
<li>橙子</li>
</ol>
</body>
</html>Run the program to try it
Some values are unordered lists, and some are ordered lists.
Image as list item marker
To specify an image for list item marker, use the list style image property:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
ul
{
list-style-image:url('/upload/course/000/000/006/580870246427d963.jpg');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>Run the program and try it
Example
All the different list item tags
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:disc;}
ul.c {list-style-type:square;}
ol.d {list-style-type:armenian;}
ol.e {list-style-type:cjk-ideographic;}
ol.f {list-style-type:decimal;}
ol.g {list-style-type:decimal-leading-zero;}
ol.h {list-style-type:georgian;}
ol.i {list-style-type:hebrew;}
ol.j {list-style-type:hiragana;}
ol.k {list-style-type:hiragana-iroha;}
ol.l {list-style-type:katakana;}
ol.m {list-style-type:katagana-iroha;}
ol.n {list-style-type:lower-alpha;}
ol.o {list-style-type:lower-greek;}
ol.p {list-style-type:lower-latin;}
ol.q {list-style-type:lower-roman;}
ol.r {list-style-type:upper-alpha;}
ol.s {list-style-type:upper-latin;}
ol.t {list-style-type:upper-roman;}
ol.u {list-style-type:none;}
ol.v {list-style-type:inherit;}
</style>
</head>
<body>
<p>不同的列表项标记</p>
<ul class="a">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ul>
<ul class="b">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ul>
<ul class="c">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ul>
<ol class="d">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="e">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="f">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="g">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="h">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="i">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="j">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="k">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="l">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="m">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="n">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="o">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="p">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="q">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="r">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="s">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="t">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="u">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="v">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
</body>
</html>Run the program to try it out
CSS list properties
| Attribute | Description |
|---|
| list-style | Abbreviation attribute. Used to set all properties for a list in one statement |
| list-style-image | Sets the image as the list item flag. |
| list-style-position | Set the position of the list item mark in the list. |
| list-style-type | Set the type of list item flag. |
Next Section