Langkah 2: Tambah Tajuk

Seterusnya, masukkan tajuk dengan menggunakan mana-mana “

” kepada “

” tag. Sebagai contoh, '

” menambah tajuk.

Langkah 3: Tambahkan Data pada Senarai

Untuk memasukkan data dalam bentuk senarai, gunakan ' ” tag:

---

---

< div kelas = 'haiwan peliharaan' >

< h1 > Senarai haiwan peliharaan < / h1 >

< itu > Ayam < / itu >

< itu > Itik < / itu >

< itu > anjing < / itu >

< itu > Kucing < / itu >

< itu > Arnab < / itu >

< / div >

Output kod yang disebutkan di atas adalah seperti berikut:

Sekarang, teruskan ke bahagian CSS untuk menggayakan senarai.

Langkah 4: Gayakan Elemen '.binatang peliharaan'.

Akses “

'elemen dengan bantuan kelas yang diberikan' .haiwan peliharaan ” dan gunakan sifat yang disenaraikan:

.haiwan peliharaan {

sempadan : 2px bertitik rgb ( 230 , lima belas , lima belas ) ;

margin : 50px ;

warna latar belakang : rgb ( 252 , 239 , 169 ) ;

}

di sini:

• “ sempadan sifat ” digunakan untuk menentukan sempadan di sekeliling elemen.
• “ margin ” mentakrifkan ruang di sekeliling sempadan unsur.
• “ warna latar belakang ” memperuntukkan warna di bahagian belakang elemen.

Imej terhasil menunjukkan output kod di atas:

Langkah 5: Senarai Ditambah Gaya 'li'

Sekarang, akses senarai ' div ” bekas mempunyai kelas “ haiwan peliharaan ” menggunakan “ .haiwan peliharaan > li ” dan gunakan sifat yang disebutkan di bawah:

.haiwan peliharaan > itu {

keterlihatan : tersembunyi ;

kelegapan : 0.2 ;

peralihan : keterlihatan 0s , kelegapan 0.5s linear ;

}

di sini:

• ' keterlihatan ” CSS digunakan untuk menetapkan keterlihatan elemen tanpa mengubah susun atur dokumen, seperti tersembunyi atau kelihatan.
• “ kelegapan ” menentukan ketelusan sesuatu elemen.
• “ peralihan ” membolehkan pengguna menukar nilai harta dengan lancar dalam tempoh tertentu:

Langkah 6: Gunakan Kelas Pseudo “hover”.

Sekarang, gunakan ' berlegar ” harta dalam senarai:

.haiwan peliharaan : berlegar > itu {

keterlihatan : nampak ;

kelegapan : satu ;

}

' : berlegar ” CSS ialah kelas pseudo yang membuat perubahan pada masa larian apabila penuding tetikus dialihkan ke atas elemen. Jadikan senarai kelihatan menggunakan ' keterlihatan ” dan tetapkan ketelusan menggunakan “ kelegapan ” Sifat CSS ke senarai pada tuding:

Dapat diperhatikan bahawa kami telah berjaya menggunakan peralihan pada ' paparan ” harta benda.

Kesimpulan

Peralihan CSS tidak boleh digunakan secara langsung pada “ paparan ” harta benda. Walau bagaimanapun, ia boleh digunakan dengan cara alternatif. Untuk berbuat demikian, tambahkan teg senarai pada dokumen HTML, akses senarai mengikut nama teg dan gunakan “ peralihan ”, “ kelegapan ”, dan “ keterlihatan ” Sifat CSS dalam senarai. Kemudian, gunakan ' : berlegar ” pseudo-class dan tetapkan nilai keterlihatan sebagai “ nampak ”. Siaran ini telah menerangkan cara peralihan digunakan pada sifat paparan CSS.