Hakbang 2: Magdagdag ng Heading

Susunod, maglagay ng heading sa pamamagitan ng paggamit ng anumang “

'sa'

” mga tag. Halimbawa, '

” dagdag ng isang heading.

Hakbang 3: Magdagdag ng Data sa Listahan

Upang maipasok ang data sa anyo ng isang listahan, gamitin ang ' 'tag:

---

---

< div klase = 'alagang hayop' >

< h1 > Listahan ng mga alagang hayop < / h1 >

< na > Sinabi ni Hen < / na >

< na > Itik < / na >

< na > aso < / na >

< na > Pusa < / na >

< na > Kuneho < / na >

< / div >

Ang output ng nabanggit na code ay ang mga sumusunod:

Ngayon, magpatuloy sa seksyon ng CSS para sa pag-istilo sa listahan.

Hakbang 4: Istilo ang Elemento ng '.pet-animal'.

I-access ang '

'elemento sa tulong ng nakatalagang klase ' .alagang hayop ” at ilapat ang mga nakalistang katangian:

.alagang hayop {

hangganan : 2px may tuldok rgb ( 230 , labinlima , labinlima ) ;

margin : 50px ;

kulay ng background : rgb ( 252 , 239 , 169 ) ;

}

dito:

• “ hangganan Ang ” property ay ginagamit upang tukuyin ang hangganan sa paligid ng elemento.
• “ margin ” ay tumutukoy sa espasyo sa paligid ng hangganan ng elemento.
• “ kulay ng background ” naglalaan ng kulay sa likurang bahagi ng elemento.

Ang resultang imahe ay nagpapakita ng output ng code sa itaas:

Hakbang 5: Listahan ng Idinagdag ng Estilo 'li'

Ngayon, i-access ang listahan ng ' div 'lalagyan na may klase' alagang hayop 'gamit ang' .pet-hayop > li ” at ilapat ang mga nabanggit na katangian:

.alagang hayop > na {

visibility : nakatago ;

opacity : 0.2 ;

paglipat : visibility 0s , opacity 0.5s linear ;

}

dito:

• Ang ' visibility ” Ginagamit ang CSS upang itakda ang visibility ng elemento nang hindi binabago ang layout ng isang dokumento, gaya ng nakatago o nakikita.
• “ opacity ” ay tumutukoy sa transparency ng isang elemento.
• “ paglipat ' ay nagbibigay-daan sa mga user na baguhin ang mga value ng property nang maayos sa isang partikular na tagal:

Hakbang 6: Ilapat ang 'hover' Pseudo Class

Ngayon, ilapat ang ' hover ” property sa listahan:

.alagang hayop : hover > na {

visibility : nakikita ;

opacity : isa ;

}

Ang ' :hover ” Ang CSS ay isang pseudo-class na gumagawa ng mga pagbabago sa oras ng pagtakbo kapag ang mouse pointer ay inilipat sa ibabaw ng elemento. Gawing nakikita ang isang listahan gamit ang “ visibility ” at itakda ang transparency gamit ang “ opacity ” Mga katangian ng CSS sa listahan sa hover:

Mapapansing matagumpay nating nailapat ang paglipat sa ' display ” ari-arian.

Konklusyon

Ang paglipat ng CSS ay hindi maaaring direktang ilapat sa ' display ” ari-arian. Gayunpaman, maaari itong ilapat sa isang alternatibong paraan. Upang gawin ito, idagdag ang list tag sa HTML na dokumento, i-access ang listahan ayon sa pangalan ng tag, at ilapat ang ' paglipat ”, “ opacity ”, at “ visibility ” Mga katangian ng CSS sa listahan. Pagkatapos, gamitin ang ' : hover ” pseudo-class at itakda ang visibility value bilang “ nakikita ”. Ipinaliwanag ng post na ito kung paano inilalapat ang paglipat sa CSS display property.