Sifat senarai CSS: jenis gaya senarai dan kedudukan gaya senarai

Sifat senarai CSS: jenis gaya senarai dan kedudukan gaya senarai, contoh kod khusus diperlukan

Dalam pembangunan bahagian hadapan , kami Senarai sering digunakan untuk memaparkan maklumat. CSS menyediakan beberapa sifat untuk mencantikkan dan menyesuaikan gaya senarai Dua sifat yang paling biasa digunakan ialah jenis gaya senarai dan kedudukan gaya senarai.

1. atribut jenis gaya senarai
   atribut jenis gaya senarai digunakan untuk menentukan jenis simbol penanda untuk item senarai. Secara lalai, penyemak imbas akan menjana simbol tanda secara automatik berdasarkan susunan senarai, biasanya titik pepejal (cakera). Tetapi kita boleh menukar gaya simbol penanda melalui atribut jenis gaya senarai.

Berikut ialah beberapa nilai jenis gaya senarai yang biasa digunakan dan kesannya:

• cakera: titik pepejal
• bulatan: titik berongga
• persegi: segi empat sama pepejal
• tiada: tiada simbol penanda
• perpuluhan: nombor perpuluhan, (1, 2 3, ...)
• perpuluhan-mendahului-sifar: Nombor perpuluhan dengan sifar pendahuluan (01, 02, 03, ...)
• rendah-roman : Huruf kecil Roman angka (i, ii, iii, ...)
• roman atas: Angka Roman huruf besar (I, II, III, ...)
• bawah -alfa: huruf kecil (a, b, c, ...)
• alfa-atas: huruf besar (A, B, C, ...)

# 🎜🎜# Sebagai contoh, jika kita ingin menukar simbol penanda senarai kepada segi empat sama pepejal, kita boleh menggunakan kod berikut:

ul {
  list-style-type: square;
}

list-style-position attribute
2. list -style- Atribut kedudukan digunakan untuk menentukan kedudukan simbol penanda item senarai. Secara lalai, simbol penanda diletakkan di sebelah kiri item senarai. Kita boleh menggunakan sifat kedudukan gaya senarai untuk meletakkan simbol penanda di luar atau di dalam item senarai.
   

Berikut ialah dua nilai ​​​​kedudukan gaya senarai dan kesannya:

di dalam: Simbol tanda ialah terletak di dalam item senarai#🎜 🎜#
• luar: Simbol penanda terletak di luar item senarai
• Sebagai contoh, jika kita ingin meletakkan simbol penanda senarai item di luar, kita boleh menggunakan kod berikut:

ul {
  list-style-position: outside;
}

Contoh komprehensif

Berikut ialah contoh yang menggabungkan jenis-gaya senarai dan kedudukan-gaya senarai, menunjukkan senarai tersusun gaya tersuai:
3. 
   

   ol {
     list-style-type: decimal;
     list-style-position: inside;
     padding-left: 20px;
   }
   
   ol li {
     padding-left: 10px;
     line-height: 1.5;
   }

Dalam contoh ini, simbol tanda senarai ialah nombor perpuluhan, yang diletakkan di dalam item senarai, dan margin kiri dan ketinggian garisan tertentu ditambahkan kepada item senarai.

Ringkasan

Dengan menggunakan sifat jenis gaya senarai dan kedudukan gaya senarai, kami boleh menyesuaikan gaya senarai untuk menjadikannya lebih konsisten dengan keperluan reka bentuk kami. Contoh di atas hanyalah sebahagian daripada penggunaan biasa Malah, terdapat beberapa nilai lain untuk kedua-dua sifat ini untuk dipilih. Dengan menggunakan atribut ini secara fleksibel, kami boleh mencipta lebih banyak kesan senarai yang pelbagai.

Atas ialah kandungan terperinci Sifat senarai CSS: jenis gaya senarai dan kedudukan gaya senarai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!