Vaihe 2: Lisää otsikko

Lisää seuraavaksi otsikko käyttämällä mitä tahansa '

”–”

”tunnisteet. Esimerkiksi, '

'lisää otsikko.

Vaihe 3: Lisää tiedot luetteloon

Jos haluat lisätä tiedot luettelon muodossa, käytä ' 'tunniste:

---

---

< div luokkaa = 'lemmikkieläin' >

< h1 > Luettelo lemmikkieläimistä < / h1 >

< että > Kana < / että >

< että > Ankka < / että >

< että > Koira < / että >

< että > Kissa < / että >

< että > Kani < / että >

< / div >

Yllä mainitun koodin tulos on seuraava:

Siirry nyt CSS-osaan luettelon muotoilua varten.

Vaihe 4: Tyyli '.pet-animal' -elementti

Avaa '

' elementti määritetyn luokan avulla ' .lemmikkieläin ' ja käytä lueteltuja ominaisuuksia:

.lemmikkieläin {

rajaa : 2px pilkullinen rgb ( 230 , viisitoista , viisitoista ) ;

marginaali : 50 pikseliä ;

taustaväri : rgb ( 252 , 239 , 169 ) ;

}

Tässä:

• ' rajaa ” -ominaisuutta käytetään määrittämään elementin ympärillä oleva raja.
• ' marginaali ” määrittää tilan elementin rajan ympärillä.
• ' taustaväri ” määrittää värin elementin takapuolelle.

Tuloksena oleva kuva näyttää yllä olevan koodin tulosteen:

Vaihe 5: Tyyli lisätty luettelo 'li'

Siirry nyt luetteloon ' div 'kontti, jolla on luokka' lemmikkieläin ' käyttäen ' .lemmikkieläin > li ” ja käytä alla mainittuja ominaisuuksia:

.lemmikkieläin > että {

näkyvyys : piilotettu ;

opasiteetti : 0.2 ;

siirtyminen : näkyvyys 0s , opasiteetti 0,5 s lineaarinen ;

}

Tässä:

• ' näkyvyys ” CSS:ää käytetään elementin näkyvyyden asettamiseen muuttamatta dokumentin asettelua, kuten piilotettua tai näkyvää.
• ' opasiteetti ” määrittää elementin läpinäkyvyyden.
• ' siirtyminen ' antaa käyttäjille mahdollisuuden muuttaa ominaisuusarvoja sujuvasti tietyn ajan kuluessa:

Vaihe 6: Käytä 'hover' pseudoluokkaa

Käytä nyt ' leijuu ” omaisuus luettelossa:

.lemmikkieläin : leijuu > että {

näkyvyys : näkyvissä ;

opasiteetti : yksi ;

}

' :hover ” CSS on pseudoluokka, joka tekee muutoksia ajon aikana, kun hiiren osoitinta siirretään elementin päälle. Tee luettelo näkyväksi ' näkyvyys ' ja aseta läpinäkyvyys käyttämällä ' opasiteetti ” CSS-ominaisuudet listaan ​​hiiri:

Voidaan havaita, että olemme onnistuneesti soveltaneet siirtymistä ' näyttö ” omaisuutta.

Johtopäätös

CSS-siirtymää ei voi soveltaa suoraan ' näyttö ” omaisuutta. Sitä voidaan kuitenkin soveltaa vaihtoehtoisella tavalla. Voit tehdä tämän lisäämällä luettelotunnisteen HTML-dokumenttiin, avaamalla luettelon tunnisteen nimen perusteella ja käyttämällä ' siirtyminen ”, “ opasiteetti ”, ja ” näkyvyys ” CSS-ominaisuudet luettelossa. Käytä sitten ' : leijuu ' pseudoluokka ja aseta näkyvyysarvoksi ' näkyvissä ”. Tämä viesti on selittänyt, kuinka siirtymää sovelletaan CSS-näyttöominaisuuteen.