2. darbība: pievienojiet virsrakstu

Pēc tam ievietojiet virsrakstu, izmantojot jebkuru '

'uz'

” atzīmes. Piemēram, '

” piebilst virsraksts.

3. darbība: pievienojiet datus sarakstam

Lai datus ievietotu saraksta veidā, izmantojiet “ 'atzīme:

---

---

< div klasē = 'mājdzīvnieks' >

< h1 > Mājdzīvnieku saraksts < / h1 >

< ka > Vista < / ka >

< ka > Pīle < / ka >

< ka > Suns < / ka >

< ka > kat < / ka >

< ka > Trusītis < / ka >

< / div >

Iepriekš minētā koda izvade ir šāda:

Tagad pārejiet uz CSS sadaļu, lai izveidotu sarakstu.

4. darbība: ieveidojiet elementu “.pet-animal”.

Piekļūstiet '

' elements ar piešķirtās klases palīdzību ' .mājdzīvnieks ” un izmantojiet uzskaitītos rekvizītus:

.mājdzīvnieks {

robeža : 2 pikseļi punktēts rgb ( 230 , piecpadsmit , piecpadsmit ) ;

starpība : 50 pikseļi ;

fona krāsa : rgb ( 252 , 239 , 169 ) ;

}

Šeit:

• ' robeža ” rekvizīts tiek izmantots, lai norādītu robežu ap elementu.
• ' starpība ” definē telpu ap elementa robežu.
• ' fona krāsa ” piešķir krāsu elementa aizmugurē.

Iegūtais attēls parāda iepriekš minētā koda izvadi:

5. darbība: izveidojiet pievienoto sarakstu “li”

Tagad piekļūstiet ' div 'konteiners ar klasi' mājdzīvnieks-dzīvnieks 'izmantojot' .pet-animal > li ” un izmantojiet tālāk minētās īpašības:

.mājdzīvnieks > ka {

redzamība : paslēptas ;

necaurredzamība : 0.2 ;

pāreja : redzamība 0s , necaurredzamība 0,5 s lineārs ;

}

Šeit:

• ' redzamība ” CSS tiek izmantots, lai iestatītu elementa redzamību, nemainot dokumenta izkārtojumu, piemēram, slēptu vai redzamu.
• ' necaurredzamība ” norāda elementa caurspīdīgumu.
• ' pāreja ” ļauj lietotājiem vienmērīgi mainīt rekvizītu vērtības noteiktā ilguma laikā:

6. darbība: pielietojiet pseidoklasi “virziet kursoru”.

Tagad izmantojiet ' novietojiet kursoru ” īpašums sarakstā:

.mājdzīvnieks : novietojiet kursoru > ka {

redzamība : redzams ;

necaurredzamība : viens ;

}

' :virziet kursoru ” CSS ir pseidoklase, kas izpildes laikā veic izmaiņas, kad peles kursors tiek pārvietots virs elementa. Padariet sarakstu redzamu, izmantojot ' redzamība ” un iestatiet caurspīdīgumu, izmantojot necaurredzamība ” CSS rekvizīti sarakstā, kas atrodas virs kursora:

Var novērot, ka esam veiksmīgi piemērojuši pāreju uz “ displejs ” īpašums.

Secinājums

CSS pāreju nevar tieši attiecināt uz ' displejs ” īpašums. Tomēr to var piemērot alternatīvā veidā. Lai to izdarītu, pievienojiet saraksta tagu HTML dokumentā, piekļūstiet sarakstam pēc taga nosaukuma un lietojiet ' pāreja ”, “ necaurredzamība ', un ' redzamība ” CSS rekvizīti sarakstā. Pēc tam izmantojiet ' : virziet kursoru ” pseidoklasi un iestatiet redzamības vērtību kā “ redzams ”. Šajā ziņojumā ir paskaidrots, kā pāreja tiek piemērota CSS displeja īpašumam.