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 | 设置列表项标志的类型。 |
neue Datei
<!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>
Vorschau
Clear
- Kursempfehlungen
- Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit
Auch Studierende, die diesen Kurs gesehen haben, lernen
Lassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen
Kurze Einführung in die Web-Frontend-Entwicklung
Umfangreiche, praktische Tianlongbabu-Entwicklung eines Mini-Version-MVC-Frameworks, das die Enzyklopädie-Website mit peinlichen Dingen imitiert
Erste Schritte mit der praktischen PHP-Entwicklung: Schnelle PHP-Erstellung [Small Business Forum]
Anmeldebestätigung und klassisches Message Board
Wissenssammlung über Computernetzwerke
Schnellstart-Node.JS-Vollversion
Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Schreiben Sie Ihr eigenes PHP-MVC-Framework (40 Kapitel ausführlich/große Details/Muss gelesen werden, damit Neulinge vorankommen)