2. lépés: Adjon hozzá egy címsort

Ezután szúrjon be egy címsort bármelyik '

' nak nek '

” címkéket. Például, '

” teszi hozzá egy címsort.

3. lépés: Adatok hozzáadása a listához

Az adatok lista formájában történő beillesztéséhez használja a „ ” címke:

---

---

< div osztály = 'kisállat' >

< h1 > A kedvtelésből tartott állatok listája < / h1 >

< hogy > Tyúk < / hogy >

< hogy > Kacsa < / hogy >

< hogy > Kutya < / hogy >

< hogy > Macska < / hogy >

< hogy > Nyúl < / hogy >

< / div >

A fent említett kód kimenete a következő:

Most lépjen tovább a CSS szakasz felé a lista stílusának kialakításához.

4. lépés: Stílusa „.pet-animal” elem

Hozzáférés a „

' elem a hozzárendelt osztály segítségével ' .állat-állat ” és alkalmazza a felsorolt ​​tulajdonságokat:

.állat-állat {

határ : 2px pontozott rgb ( 230 , tizenöt , tizenöt ) ;

árrés : 50 képpont ;

háttérszín : rgb ( 252 , 239 , 169 ) ;

}

Itt:

• ' határ ” tulajdonság az elem körüli határ meghatározására szolgál.
• ' árrés ” határozza meg az elemhatár körüli teret.
• ' háttérszín ” kijelöl egy színt az elem hátoldalán.

Az eredményül kapott kép a fenti kód kimenetét mutatja:

5. lépés: Stílus hozzáadott lista „li”

Most nyissa meg a „ div 'osztályú konténer' kisállat-állat ' segítségével ' .pet-animal > li ” és alkalmazza az alábbi tulajdonságokat:

.állat-állat > hogy {

láthatóság : rejtett ;

átlátszatlanság : 0.2 ;

átmenet : láthatóság 0s , átlátszatlanság 0,5 s lineáris ;

}

Itt:

• Az ' láthatóság ” A CSS-t az elem láthatóságának beállítására használják a dokumentum elrendezésének megváltoztatása nélkül, például rejtett vagy látható.
• ' átlátszatlanság ” egy elem átlátszóságát adja meg.
• ' átmenet ” lehetővé teszi a felhasználók számára a tulajdonságértékek zökkenőmentes megváltoztatását egy adott időtartam alatt:

6. lépés: Alkalmazza a „hover” pszeudoosztályt

Most alkalmazza a „ lebeg ” tulajdonság a listán:

.állat-állat : lebeg > hogy {

láthatóság : látható ;

átlátszatlanság : egy ;

}

Az ' :lebeg ” A CSS egy pszeudoosztály, amely futási időben módosítja, amikor az egérmutatót az elem fölé viszi. Tegye láthatóvá a listát a „ láthatóság ” és állítsa be az átlátszóságot a „ átlátszatlanság ” CSS-tulajdonságok a lebegtetett listához:

Megfigyelhető, hogy sikeresen alkalmaztuk az átmenetet a „ kijelző ' ingatlan.

Következtetés

A CSS átmenet nem alkalmazható közvetlenül a „ kijelző ' ingatlan. Alkalmazható azonban más módon is. Ehhez adja hozzá a lista címkét a HTML-dokumentumhoz, nyissa meg a listát a címkenév alapján, és alkalmazza a ' átmenet ”, „ átlátszatlanság ”, és „ láthatóság ” CSS-tulajdonságok a listán. Ezután használja a „ : lebeg ” pszeudoosztályt, és állítsa be a láthatósági értéket a következőre látható ”. Ez a bejegyzés elmagyarázta, hogyan alkalmazzák az átmenetet a CSS megjelenítési tulajdonságára.