Gaya senarai CSS
Kami belajar sebelum ini dalam bab HTML:
1 Senarai tidak tersusun - item senarai ditandakan dengan grafik khas (seperti titik hitam kecil, kotak kecil, dll.)
2. Senarai Jujukan Ya - Item senarai ditanda dengan nombor atau huruf
Mari lihat senarai dalam CSS.
Penjelasan terperinci tentang gaya ul dan li dalam CSS
Senarai ul dan li dibentangkan menggunakan CSS Unsur yang biasa digunakan. Dalam CSS, terdapat atribut yang secara khusus mengawal prestasi senarai Atribut yang biasa digunakan termasuk atribut jenis gaya senarai, atribut imej gaya senarai, atribut kedudukan gaya senarai dan atribut gaya senarai.
1. atribut jenis-gaya senarai
Atribut jenis-gaya senarai digunakan untuk mentakrif bulet senarai li, iaitu Hiasan di hadapan senarai. Atribut jenis gaya senarai ialah atribut yang boleh diwarisi. Struktur sintaksnya adalah seperti berikut: (Senaraikan beberapa nilai atribut yang biasa digunakan)
senarai-style-type: none/disc/circle/square/demic/lower-alpha/upper-alpha/lower-roman/atas -roman
Terdapat banyak nilai atribut untuk atribut jenis-gaya senarai Di sini kami hanya menyenaraikan beberapa nilai yang lebih biasa digunakan.
tiada: Jangan gunakan mata peluru. cakera: bulatan pepejal. bulatan: bulatan berongga. segi empat sama: segi empat sama pepejal. demical: angka Arab. alfa rendah: huruf kecil Inggeris. alfa atas: huruf besar Inggeris. roman rendah: angka Roman huruf kecil. huruf besar-roman: angka Rom huruf besar.
Kod sampel untuk menggunakan atribut jenis gaya senarai adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style-type:square;}
</style>
</head>
<body>
<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
</body>
</html>2 atribut imej gaya senarai
Atribut imej gaya senarai digunakan untuk mentakrifkan penggunaan gambar dan bukannya peluru. Ia juga merupakan atribut yang boleh diwarisi, dan struktur sintaksnya adalah seperti berikut:
List-style-image:none/url
Atribut senarai-style-image boleh mengambil dua nilai:
tiada: Tiada imej gantian. url: Laluan imej yang akan diganti.
Mari kita lihat sekeping kod:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style-image:url(http://php.cn/style/images/sqpurple.gif);}
</style>
</head>
<body>
<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
</body>
</html>3. atribut kedudukan gaya senarai
gaya senarai -position attribute , ialah atribut yang digunakan untuk menentukan kedudukan paparan peluru dalam senarai. Ia juga merupakan atribut yang boleh diwarisi dengan struktur sintaks berikut:
kedudukan gaya senarai: dalam/luar
dalam: Peluru diletakkan dalam teks. di luar: Peluru diletakkan di luar teks.
Contoh penggunaan atribut senarai-style-position adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style-type:square;list-style-position:outside;}
</style>
</head>
<body>
<ul>
<li>这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。
这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。
这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
</body>
</html>4. atribut gaya senarai
senarai- Atribut gaya ialah atribut yang menetapkan gaya li secara menyeluruh Ia juga merupakan atribut boleh diwarisi seperti berikut:
li-style:list-style-type/list-style-. imej/kedudukan-gaya-senarai
Kedudukan setiap nilai boleh ditukar. Contohnya:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style:url( inside;}
</style>
</head>
<body>
<ul>
<li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。
这里是使用list-style属性的示例。请注意换行以后项目符号的位置。
这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
</ul>
</body>
</html>Penyelesaian Keserasian Penyemak Imbas
Juga dalam semua penyemak imbas, contoh berikut akan memaparkan tag imej:
ul
{
jenis-gaya senarai: tiada;
padding: 0px;
margin: 0px;
}
ul li
{
imej latar belakang: url(sqpurple.gif);
ulang-latar: tiada ulangan;
kedudukan latar belakang: 0px 5px
padding -kiri: 14px;
}
Penjelasan contoh:
ul:
Tetapkan jenis gaya senarai untuk tidak memadam teg item senarai
tetapkan pelapik dan jidar kepada 0px (keserasian penyemak imbas)
semua li in ul:
tetapkan URL imej dan tetapkannya untuk ditunjukkan sekali sahaja (tiada pendua )
Kedudukan imej kedudukan yang anda perlukan (0px kiri dan 5px atas dan bawah)
Gunakan atribut padding-left untuk meletakkan teks dalam senarai
