2. korak: Dodajte naslov

Nato vstavite naslov tako, da uporabite poljubno »

' do '

” oznake. Na primer, '

” doda naslov.

3. korak: Dodajte podatke na seznam

Za vnos podatkov v obliki seznama uporabite » ' oznaka:

---

---

< div razred = 'hišna žival' >

< h1 > Seznam hišnih živali < / h1 >

< to > Kokoš < / to >

< to > Raca < / to >

< to > pes < / to >

< to > Mačka < / to >

< to > Zajec < / to >

< / div >

Rezultat zgoraj omenjene kode je naslednji:

Zdaj se premaknite naprej proti razdelku CSS za oblikovanje seznama.

4. korak: Slog elementa ».pet-animal«.

Dostop do »

' element s pomočjo dodeljenega razreda ' .hišna žival « in uporabite navedene lastnosti:

.hišna žival {

meja : 2 slikovnih pik pikčasto rgb ( 230 , petnajst , petnajst ) ;

marža : 50 slikovnih pik ;

Barva ozadja : rgb ( 252 , 239 , 169 ) ;

}

Tukaj:

• “ meja Lastnost se uporablja za določanje meje okoli elementa.
• “ marža ” določa prostor okoli meje elementa.
• “ Barva ozadja ” dodeli barvo na zadnji strani elementa.

Nastala slika prikazuje rezultat zgornje kode:

5. korak: Seznam z dodanim slogom »li«

Zdaj odprite seznam » div 'vsebnik, ki ima razred' hišna žival ' z uporabo ' .hišna-žival > li « in uporabite spodaj navedene lastnosti:

.hišna žival > to {

vidnost : skrit ;

nepreglednost : 0,2 ;

prehod : vidnost 0s , nepreglednost 0,5s linearni ;

}

Tukaj:

• ' vidnost ” CSS se uporablja za nastavitev vidnosti elementa brez spreminjanja postavitve dokumenta, na primer skritega ali vidnega.
• “ nepreglednost ” določa prosojnost elementa.
• “ prehod ” omogoča uporabnikom gladko spreminjanje vrednosti lastnosti v določenem času:

6. korak: Uporabite psevdo razred »lebdenja«.

Zdaj uporabite ' lebdeti ” nepremičnina na seznamu:

.hišna žival : lebdeti > to {

vidnost : viden ;

nepreglednost : eno ;

}

' :lebdi ” CSS je psevdorazred, ki spreminja med izvajanjem, ko se kazalec miške premakne nad element. Naredite seznam viden s pomočjo » vidnost ' in nastavite prosojnost z ' nepreglednost ” Lastnosti CSS na seznam ob premikanju miške:

Opazimo lahko, da smo uspešno uporabili prehod na ' zaslon ” lastnina.

Zaključek

Prehoda CSS ni mogoče neposredno uporabiti za » zaslon ” lastnina. Lahko pa se uporablja na alternativni način. Če želite to narediti, dodajte oznako seznama v dokument HTML, dostopajte do seznama po imenu oznake in uporabite » prehod ”, “ nepreglednost «, in » vidnost ” Lastnosti CSS na seznamu. Nato uporabite » : lebdi ' psevdorazred in nastavite vrednost vidnosti kot ' viden ”. V tej objavi je razloženo, kako se prehod uporabi za lastnost prikaza CSS.