Pasul 2: Adăugați un titlu

Apoi, inserați un titlu utilizând orice „

' la '

' Etichete. De exemplu, '

” adaugă un titlu.

Pasul 3: Adăugați date în listă

Pentru a introduce datele sub forma unei liste, utilizați „ ' etichetă:

---

---

< div clasă = 'animal de companie' >

< h1 > Lista animalelor de companie < / h1 >

< acea > Găină < / acea >

< acea > Rață < / acea >

< acea > Câine < / acea >

< acea > Pisică < / acea >

< acea > Iepure < / acea >

< / div >

Rezultatul codului de mai sus este după cum urmează:

Acum, mergeți mai departe către secțiunea CSS pentru stilizarea listei.

Pasul 4: Stilați Elementul „.pet-animal”.

Accesați „

” element cu ajutorul clasei atribuite “ .animal de companie ” și aplicați proprietățile enumerate:

.animal de companie {

frontieră : 2px punctat rgb ( 230 , cincisprezece , cincisprezece ) ;

marginea : 50px ;

culoare de fundal : rgb ( 252 , 239 , 169 ) ;

}

Aici:

• „ frontieră ” este folosită pentru a specifica limita în jurul elementului.
• „ marginea ” definește spațiul din jurul limitei elementului.
• „ culoare de fundal ” alocă o culoare în partea din spate a elementului.

Imaginea rezultată arată rezultatul codului de mai sus:

Pasul 5: Lista de stil adăugată „li”

Acum, accesați lista de „ div „container având clasa „ animal de companie „folosind „ .pet-animal > li ” și aplicați proprietățile menționate mai jos:

.animal de companie > acea {

vizibilitate : ascuns ;

opacitate : 0,2 ;

tranziție : vizibilitate 0s , opacitate 0,5s liniar ;

}

Aici:

• „ vizibilitate ”CSS este utilizat pentru a seta vizibilitatea elementului fără a modifica aspectul unui document, cum ar fi ascuns sau vizibil.
• „ opacitate ” precizează transparența unui element.
• „ tranziție ” permite utilizatorilor să modifice fără probleme valorile proprietăților pe o anumită durată:

Pasul 6: Aplicați „hover” Pseudo Class

Acum, aplicați „ planare ” proprietate pe listă:

.animal de companie : planare > acea {

vizibilitate : vizibil ;

opacitate : unu ;

}

„ :planare ” CSS este o pseudo-clasă care face modificări în timpul de execuție atunci când cursorul mouse-ului este mutat peste element. Faceți o listă vizibilă folosind butonul „ vizibilitate ” și setați transparența folosind butonul „ opacitate ”Proprietăți CSS la lista de pe hover:

Se poate observa că am aplicat cu succes tranziția pe „ afişa ” proprietate.

Concluzie

Tranziția CSS nu poate fi aplicată direct la „ afişa ” proprietate. Cu toate acestea, poate fi aplicat într-un mod alternativ. Pentru a face acest lucru, adăugați eticheta listă pe documentul HTML, accesați lista după numele etichetei și aplicați „ tranziție ”, “ opacitate ', și ' vizibilitate ” Proprietăți CSS pe listă. Apoi, utilizați „ : planează ” pseudo-clasă și setați valoarea vizibilității ca „ vizibil ”. Această postare a explicat cum se aplică tranziția proprietății de afișare CSS.