2 veiksmas: pridėkite antraštę

Tada įterpkite antraštę naudodami bet kurį '

'į'

“ žymas. Pavyzdžiui, '

“ prideda antraštė.

3 veiksmas: įtraukite duomenis į sąrašą

Norėdami įterpti duomenis sąrašo pavidalu, naudokite „ “ žyma:

---

---

< div klasė = 'naminis gyvūnas' >

< h1 > Naminių gyvūnų sąrašas < / h1 >

< kad > Višta < / kad >

< kad > Antis < / kad >

< kad > Šuo < / kad >

< kad > Katė < / kad >

< kad > Triušis < / kad >

< / div >

Aukščiau minėto kodo išvestis yra tokia:

Dabar pereikite prie CSS skyriaus, kad sukurtumėte sąrašo stilių.

4 veiksmas: sukurkite elemento „.pet-animal“ stilių

Pasiekite „

' elementas su priskirtos klasės pagalba ' .naminis gyvūnas “ ir pritaikykite išvardytas savybes:

.naminis gyvūnas {

siena : 2px taškuotas rgb ( 230 , penkiolika , penkiolika ) ;

marža : 50 piks ;

fono spalva : rgb ( 252 , 239 , 169 ) ;

}

Čia:

• “ siena ypatybė naudojama norint nurodyti ribą aplink elementą.
• “ marža “ apibrėžia erdvę aplink elemento ribą.
• “ fono spalva “ priskiria spalvą elemento gale.

Gautas vaizdas rodo aukščiau pateikto kodo išvestį:

5 veiksmas: įtraukite stilių į sąrašą „li“

Dabar eikite į sąrašą div 'konteineris, kurio klasė' naminis gyvūnas “ naudojant “ .naminis gyvūnas > li “ ir pritaikykite toliau nurodytas savybes:

.naminis gyvūnas > kad {

matomumas : paslėptas ;

neskaidrumas : 0.2 ;

perėjimas : matomumas 0s , neskaidrumas 0,5 sek linijinis ;

}

Čia:

• „ matomumas ” CSS naudojamas elemento matomumui nustatyti nekeičiant dokumento išdėstymo, pvz., paslėpto ar matomo.
• “ neskaidrumas “ nurodo elemento skaidrumą.
• “ perėjimas “ leidžia vartotojams sklandžiai keisti nuosavybės vertes per tam tikrą laiką:

6 veiksmas: taikykite „užveskite“ pseudo klasę

Dabar pritaikykite „ užveskite pelės žymeklį “ nuosavybė sąraše:

.naminis gyvūnas : užveskite pelės žymeklį > kad {

matomumas : matomas ;

neskaidrumas : vienas ;

}

„ :užveskite pelės žymeklį ” CSS yra pseudoklasė, kuri atlieka pakeitimus vykdymo metu, kai pelės žymeklis perkeliamas virš elemento. Padarykite sąrašą matomą naudodami „ matomumas “ ir nustatykite skaidrumą naudodami „ neskaidrumas ” CSS ypatybes į sąrašą užvedus pelės žymeklį:

Galima pastebėti, kad sėkmingai pritaikėme perėjimą „ ekranas ' nuosavybė.

Išvada

CSS perėjimo negalima tiesiogiai pritaikyti „ ekranas ' nuosavybė. Tačiau jis gali būti taikomas ir kitu būdu. Norėdami tai padaryti, pridėkite sąrašo žymą HTML dokumente, pasiekite sąrašą pagal žymos pavadinimą ir pritaikykite „ perėjimas “, „ neskaidrumas “ ir „ matomumas “ CSS ypatybės sąraše. Tada naudokite „ : užveskite pelės žymeklį pseudoklasę ir nustatykite matomumo reikšmę kaip „ matomas “. Šiame įraše paaiškinta, kaip perėjimas taikomas CSS rodymo nuosavybei.