Krok 2: Přidejte nadpis

Dále vložte nadpis pomocí libovolného „

“ až “

” tagy. Například, '

“ přidává nadpis.

Krok 3: Přidejte data do seznamu

Chcete-li vložit data ve formě seznamu, použijte „ značka ”:

---

---

< div třída = 'zvíře v zájmovém chovu' >

< h1 > Seznam zvířat v zájmovém chovu < / h1 >

< že > Slepice < / že >

< že > Kachna < / že >

< že > Pes < / že >

< že > Kočka < / že >

< že > Králičí < / že >

< / div >

Výstup výše uvedeného kódu je následující:

Nyní přejděte k části CSS pro stylování seznamu.

Krok 4: Styl prvku „.pet-animal“.

Přístup k „

'prvek s pomocí přiřazené třídy' .domácí zvíře “ a použijte uvedené vlastnosti:

.domácí zvíře {

okraj : 2px tečkovaný rgb ( 230 , patnáct , patnáct ) ;

okraj : 50 pixelů ;

barva pozadí : rgb ( 252 , 239 , 169 ) ;

}

Tady:

• “ okraj Vlastnost ” se používá k určení hranice kolem prvku.
• “ okraj ” definuje prostor kolem hranice prvku.
• “ barva pozadí ” přiděluje barvu na zadní straně prvku.

Výsledný obrázek ukazuje výstup výše uvedeného kódu:

Krok 5: Seznam přidaných stylů „li“

Nyní přejděte na seznam „ div 'kontejner s třídou' domácí zvíře ' použitím ' .domácí zvíře > li “ a použijte níže uvedené vlastnosti:

.domácí zvíře > že {

viditelnost : skrytý ;

neprůhlednost : 0,2 ;

přechod : viditelnost 0 s , neprůhlednost 0,5 s lineární ;

}

Tady:

• ' viditelnost ” CSS se používá k nastavení viditelnosti prvku bez změny rozvržení dokumentu, jako je skrytý nebo viditelný.
• “ neprůhlednost ” určuje průhlednost prvku.
• “ přechod ” umožňuje uživatelům plynule měnit hodnoty vlastností po danou dobu:

Krok 6: Aplikujte Pseudo třídu „hover“.

Nyní použijte „ vznášet se “ nemovitost na seznamu:

.domácí zvíře : vznášet se > že {

viditelnost : viditelné ;

neprůhlednost : jeden ;

}

' :vznášet se ” CSS je pseudotřída, která provádí změny za běhu, když se ukazatel myši přesune nad prvek. Zviditelnit seznam pomocí „ viditelnost “ a nastavte průhlednost pomocí „ neprůhlednost ” CSS vlastnosti do seznamu po najetí myší:

Lze pozorovat, že jsme úspěšně aplikovali přechod na „ Zobrazit ' vlastnictví.

Závěr

Přechod CSS nelze přímo použít na „ Zobrazit ' vlastnictví. Lze jej však aplikovat i alternativním způsobem. Chcete-li tak učinit, přidejte značku seznamu do dokumentu HTML, otevřete seznam podle názvu značky a použijte „ přechod “, “ neprůhlednost ', a ' viditelnost ” CSS vlastnosti v seznamu. Poté použijte „ : vznášet se ” pseudotřída a nastavte hodnotu viditelnosti jako “ viditelné “. Tento příspěvek vysvětlil, jak se přechod aplikuje na vlastnost zobrazení CSS.