Gaya senarai CSS (ul)
Senarai CSS
Fungsi sifat senarai CSS seperti berikut:
Tetapkan item senarai yang berbeza untuk ditandakan sebagai senarai tersusun
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 ditanda dengan grafik khas (seperti titik hitam kecil, kecil kotak, dsb.)
Senarai tersusun - item senarai dilabelkan dengan nombor atau huruf
Menggunakan CSS, penggayaan senarai selanjutnya boleh selesai, Dan anda boleh menggunakan imej sebagai penanda item senarai.
Teg item senarai yang berbeza
Atribut jenis gaya senarai menentukan jenis teg item senarai:
Instance
<!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>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>Jalankan instance»
Klik butang "Run instance" untuk melihat contoh dalam talian
Sesetengah nilai adalah senarai tidak tersusun dan beberapa adalah senarai tersusun.
Imej sebagai penanda item senarai
Untuk menentukan imej bagi penanda item senarai, gunakan atribut imej gaya senarai:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
ul
{
list-style-image:url('http://img.php.cn/upload/article/000/000/015/5c67daf64b661194.gif');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Contoh di atas tidak memaparkan perkara yang sama dalam semua pelayar , IE dan Opera memaparkan teg imej lebih tinggi sedikit daripada Firefox, Chrome dan Safari.
Jika anda ingin meletakkan logo imej yang sama dalam semua penyemak imbas, anda harus menggunakan penyelesaian keserasian penyemak imbas Prosesnya adalah seperti berikut
Penyelesaian keserasian penyemak imbas
Juga dalam semua. pelayar, contoh berikut akan memaparkan penanda imej:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li
{
background-image:url("http://img.php.cn/upload/article/000/000/015/5c67daf64b661194.gif");
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>Running Instance»
Klik butang "Run Butang Instance" untuk melihat contoh dalam talian
Contoh penjelasan:
ul:
Set jenis gaya senarai untuk tiada mengalih keluar teg item senarai
Tetapkan padding dan margin kepada 0px (keserasian penyemak imbas)
Semua li dalam ul :
Tetapkan URL imej dan tetapkan untuk dipaparkan sekali sahaja (tiada pendua)
apa yang anda perlukan Kedudukan imej (0px kiri dan 5px atas dan bawah)
Gunakan atribut padding-left untuk meletakkan teks dalam senarai
Atribut disingkat senarai
Semua atribut senarai boleh ditentukan dalam satu atribut. Ini dipanggil atribut singkatan.
Gunakan atribut singkatan untuk senarai dan atribut gaya senarai ditetapkan seperti berikut:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
ul
{
list-style:square url("http://img.php.cn/upload/article/000/000/015/5c67daf64b661194.gif");
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Jika anda menggunakan nilai atribut yang disingkatkan, susunannya ialah:
jenis-gaya senarai
kedudukan gaya senarai (lihat jadual sifat CSS di bawah untuk arahan)
senarai-style-image
Tidak kira jika salah satu nilai di atas hilang dan selebihnya masih dalam susunan yang ditentukan.
Lagi contoh
Contoh: semua penanda item senarai yang berbeza
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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:katakana-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>
<ul class="a">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Disc type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="c">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ol class="d">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="e">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="f">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="g">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="h">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="i">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="j">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="k">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="l">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="m">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="n">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="o">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="p">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="q">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="r">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="s">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="t">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="u">
<li>None type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="v">
<li>inherit type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>Jalankan Contoh?
Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian
Contoh ini menunjukkan semua penanda item senarai CSS yang berbeza.
Semua sifat senarai CSS
| Harta | Penerangan | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
gaya senarai
| Atribut singkatan. Digunakan untuk menetapkan semua sifat untuk senarai dalam satu pernyataan | ||||||||||
| list-style-image<🎜> | Menetapkan imej sebagai bendera item senarai. | ||||||||||
| list-style-position<🎜> | Tetapkan kedudukan tanda item senarai dalam senarai. | ||||||||||
| jenis-gaya-senarai<🎜> | Tetapkan jenis bendera item senarai. |
