senarai CSS
Senarai CSS
Fungsi sifat senarai CSS seperti berikut:
Tetapkan item senarai yang berbeza untuk ditanda seperti yang dipesan Senarai
Tetapkan item senarai berbeza ditandakan sebagai senarai tidak tersusun
Tetapkan item senarai ditandakan sebagai imej
Senarai
Dalam HTML, terdapat dua jenis senarai:
Senarai tidak tersusun - item senarai ditandakan dengan grafik khas (seperti titik hitam kecil, kotak kecil, dsb.)
Senarai tersusun - item senarai ditanda dengan nombor atau huruf
Menggunakan CSS, anda boleh menyenaraikan gaya selanjutnya dan menggunakan imej sebagai penanda item senarai.
Teg item senarai yang berbeza
Atribut jenis gaya senarai menentukan jenis teg item senarai: :
Contoh
<!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>無序列表實例:</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>Jalankan atur cara untuk mencubanya
Sesetengah nilai adalah senarai tidak tersusun, dan beberapa adalah senarai tersusun.
Imej sebagai penanda item senarai
Untuk menentukan imej sebagai penanda item senarai, gunakan atribut imej gaya senarai:
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>Jalankan program dan cuba
Instance
Semua teg item senarai yang berbeza
<!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>不同的列表項標記</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>Jalankan program untuk mencubanya
Sifat senarai CSS
| 屬性 | 描述 |
|---|---|
| list-style | 簡寫屬性。用于把所有用于列表的屬性設置于一個聲明中 |
| list-style-image | 將圖象設置為列表項標志。 |
| list-style-position | 設置列表中列表項標志的位置。 |
| list-style-type | 設置列表項標志的類型。 |
