masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Gaya senarai CSS

Gaya senarai CSS

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 ditandakan dengan grafik khas (seperti titik hitam kecil, kotak kecil, dsb.)

Senarai tersusun - item senarai ditanda dengan nombor atau The huruf

boleh digayakan lagi menggunakan CSS dan boleh ditandakan dengan imej sebagai item senarai.

1． Simbol senarai

Simbol senarai merujuk kepada simbol yang dipaparkan di hadapan setiap item senarai.

Format asas adalah seperti berikut:

jenis gaya senarai: parameter

Julat nilai parameter:

·cakera: bulatan

·bulatan: bulatan berongga

·segi empat sama: segi empat sama

·perpuluhan: nombor perpuluhan

·roman bawah: angka Roman huruf kecil

·atas - roman: huruf besar angka Rom

· huruf kecil: huruf Yunani huruf kecil

· huruf besar: huruf Yunani huruf besar

· tiada: tiada paparan simbol

cakera dalam parameter ialah pilihan lalai.

rreeee

2． Simbol grafik

Simbol grafik bermaksud peluru dalam senarai asal boleh digantikan dengan grafik.

Format asas adalah seperti berikut:

imej gaya senarai: URL

URL ialah alamat fail grafik yang digunakan untuk menggantikan titik tumpu dan anda boleh menggunakan alamat relatif atau alamat mutlak.

3． Kedudukan Senarai

Kedudukan Senarai menerangkan tempat senarai dipaparkan.

Format asas adalah seperti berikut:

kedudukan gaya senarai: parameter

Julat nilai parameter:

·dalam: dipaparkan di dalam model BOX

·luar: dipaparkan di luar model BOX

Konsep baharu muncul di sini: model BOX. BOX merujuk kepada bekas yang mengandungi objek yang peraturan gaya digunakan. Pengenalan terperinci akan diberikan kemudian.

Imej sebagai penanda item senarai

Untuk menentukan imej sebagai penanda item senarai, gunakan atribut imej gaya senarai: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<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>

Contoh di atas berfungsi sama sekali Paparan dalam penyemak imbas tidak sama, 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 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<style>
ul 
{
list-style-image:url('../style/images/sqpurple.gif');
}
</style>
</head>
<body>
<ul>
  <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ul>
</body>
</html>

Contoh penjelasan:

ul:

Tetapkan jenis gaya senarai kepada tiada pemadaman teg item senarai

Tetapkan padding dan margin kepada 0px (keserasian penyemak imbas)

Semua li in ul:

Tetapkan URL imej, dan tetapkannya untuk dipaparkan sekali sahaja (tiada ulangan)

Letakkan imej di tempat yang anda perlukan (0px kiri dan 5px atas dan bawah)

Letakkan teks dalam senarai dengan padding- atribut kiri

Atribut singkatan senarai

Semua atribut senarai boleh ditentukan dalam satu atribut. Ini dipanggil atribut singkatan.

Jika nilai sifat singkatan digunakan, susunannya ialah:

jenis gaya senarai

kedudukan gaya senarai (lihat jadual sifat CSS di bawah untuk arahan)

imej gaya senarai

Tidak kira jika salah satu nilai di atas hilang dan selebihnya masih dalam susunan yang ditentukan.

Semua sifat senarai CSS

Sifat 🎜>

atribut trengkas gaya senarai. Tetapkan semua atribut yang digunakan untuk senarai dalam pernyataan

List-Style-IMAGE untuk menetapkan imej sebagai logo item senarai.

kedudukan gaya senarai Tetapkan kedudukan tanda item senarai dalam senarai.                                                                                                                                                                                                                                                                                                                                                                                     

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492412 permainan