Liste CSS
Liste CSS
Les propriétés de la liste CSS fonctionnent comme suit?:
Définir les différents éléments de la liste à marquer comme liste ordonnée
Définir différents éléments de liste marqués comme liste non ordonnée
Définir les éléments de liste marqués comme images
Liste
En HTML, il existe deux types de listes :
Liste non ordonnée?: les éléments de la liste sont marqués de graphiques spéciaux (tels que des petits points noirs, des petites cases, etc.)
Liste ordonnée?: les éléments de la liste sont marqués de chiffres ou de lettres
En utilisant CSS, vous pouvez répertorier d'autres styles et utiliser des images comme marqueurs d'éléments de liste.
Différentes balises d'élément de liste
L'attribut list-style-type spécifie le type de balise d'élément de liste?:
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>無(wú)序列表實(shí)例:</p>
<ul class="a">
<li>香蕉</li>
<li>蘋果</li>
<li>橙子</li>
</ul>
<ul class="b">
<li>香蕉</li>
<li>蘋果</li>
<li>橙子</li>
</ul>
<p>有序列表實(shí)例:</p>
<ol class="c">
<li>香蕉</li>
<li>蘋果</li>
<li>橙子</li>
</ol>
<ol class="d">
<li>香蕉</li>
<li>蘋果</li>
<li>橙子</li>
</ol>
</body>
</html>Exécutez le programme pour l'essayer
Certaines valeurs sont des listes non ordonnées et d'autres sont des listes ordonnées.
Image comme marqueur d'élément de liste
Pour spécifier une image comme marqueur d'élément de liste, utilisez l'attribut d'image de style de liste?:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>Exécutez le programme et essayez-le
Instance
Toutes les différentes balises d'éléments de liste
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>不同的列表項(xiàng)標(biāo)記</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>Exécutez le programme pour l'essayer
Propriétés de la liste CSS
| 屬性 | 描述 |
|---|---|
| list-style | 簡(jiǎn)寫屬性。用于把所有用于列表的屬性設(shè)置于一個(gè)聲明中 |
| list-style-image | 將圖象設(shè)置為列表項(xiàng)標(biāo)志。 |
| list-style-position | 設(shè)置列表中列表項(xiàng)標(biāo)志的位置。 |
| list-style-type | 設(shè)置列表項(xiàng)標(biāo)志的類型。 |
