Krok 2: Pridajte nadpis

Potom vložte nadpis pomocou ľubovoľného „

“ až “

'značky.' Napríklad „

“ pridáva nadpis.

Krok 3: Pridajte údaje do zoznamu

Ak chcete vložiť údaje vo forme zoznamu, použite „ Značka ”:

---

---

< div trieda = 'domáce zviera' >

< h1 > Zoznam domácich zvierat < / h1 >

< že > Sliepka < / že >

< že > Kačica < / že >

< že > pes < / že >

< že > Cat < / že >

< že > Králik < / že >

< / div >

Výstup vyššie uvedeného kódu je nasledujúci:

Teraz prejdite k sekcii CSS na úpravu štýlu zoznamu.

Krok 4: Štýl prvku „.pet-animal“.

Prístup k „

'prvok s pomocou priradenej triedy' .domáce zviera “ a použite uvedené vlastnosti:

.domáce zviera {

hranica : 2px bodkovaný rgb ( 230 , pätnásť , pätnásť ) ;

marža : 50 pixelov ;

farba pozadia : rgb ( 252 , 239 , 169 ) ;

}

Tu:

• “ hranica Vlastnosť ” sa používa na určenie hranice okolo prvku.
• “ marža ” definuje priestor okolo hranice prvku.
• “ farba pozadia ” prideľuje farbu na zadnú stranu prvku.

Výsledný obrázok zobrazuje výstup vyššie uvedeného kódu:

Krok 5: Pridaný štýl zoznamu „li“

Teraz prejdite na zoznam „ div 'kontajner s triedou' domáce zviera ' použitím ' .domáce zviera > li “ a použite nižšie uvedené vlastnosti:

.domáce zviera > že {

viditeľnosť : skryté ;

nepriehľadnosť : 0,2 ;

prechod : viditeľnosť 0 s , nepriehľadnosť 0,5 s lineárne ;

}

Tu:

• ' viditeľnosť CSS sa používa na nastavenie viditeľnosti prvku bez zmeny rozloženia dokumentu, ako je skrytý alebo viditeľný.
• “ nepriehľadnosť ” určuje priehľadnosť prvku.
• “ prechod ” umožňuje používateľom plynulo meniť hodnoty vlastností počas daného trvania:

Krok 6: Aplikujte pseudotriedu „hover“.

Teraz použite „ vznášať sa “ nehnuteľnosť v zozname:

.domáce zviera : vznášať sa > že {

viditeľnosť : viditeľné ;

nepriehľadnosť : jeden ;

}

' :vznášať sa ” CSS je pseudotrieda, ktorá vykonáva zmeny počas spustenia, keď sa kurzor myši presunie nad prvok. Zviditeľnite zoznam pomocou „ viditeľnosť “ a nastavte priehľadnosť pomocou „ nepriehľadnosť ” CSS vlastnosti do zoznamu po umiestnení kurzora myši:

Dá sa pozorovať, že sme úspešne aplikovali prechod na „ displej ' nehnuteľnosť.

Záver

Prechod CSS nemožno priamo použiť na „ displej ' nehnuteľnosť. Dá sa však aplikovať aj alternatívnym spôsobom. Ak to chcete urobiť, pridajte značku zoznamu do dokumentu HTML, prejdite do zoznamu podľa názvu značky a použite „ prechod “, “ nepriehľadnosť “ a „ viditeľnosť ” CSS vlastnosti v zozname. Potom použite „ : vznášať sa ” pseudotrieda a nastavte hodnotu viditeľnosti ako “ viditeľné “. Tento príspevok vysvetlil, ako sa prechod aplikuje na vlastnosť zobrazenia CSS.