CSS 列表
CSS 列表
CSS列表属性作用如下：
设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像
列表
在HTML中，有两种类型的列表：
无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 - 列表项的标记有数字或字母
使用CSS，可以列出进一步的样式，并可用图像作列表项标记。
不同的列表项标记
list-style-type属性指定列表项标记的类型是：:
实例
<!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>运行程序尝试一下
一些值是无序列表，以及有些是有序列表。
作为列表项标记的图像
要指定列表项标记的图像，使用列表样式图像属性：
实例
<!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>运行程序尝试一下
实例
所有不同的列表项标记
<!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>运行程序尝试一下
CSS列表属性
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
| list-style-image | 将图象设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
![Front-End-Projekt-Shangyou [umfassende Praxis der HTML/CSS/JS-Technologie]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Nullbasierter Front-End-Kurs [Vue fortgeschrittenes Lernen und praktische Anwendung]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB-Frontend-Tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Praktische Anwendung von Apipost [API, Schnittstelle, automatisiertes Testen, Mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
