Stap 2: voeg een kop toe

Voeg vervolgens een kop in door een willekeurige '

' tot '

'labels. Bijvoorbeeld, '

” voegt een kopje toe.

Stap 3: voeg gegevens toe aan de lijst

Om de gegevens in de vorm van een lijst in te voegen, gebruikt u de ' label:

---

---

< div klas = 'huisdier' >

< h1 > Lijst met gezelschapsdieren < / h1 >

< Dat > Kip < / Dat >

< Dat > Eend < / Dat >

< Dat > Hond < / Dat >

< Dat > Kat < / Dat >

< Dat > Konijn < / Dat >

< / div >

De uitvoer van de bovengenoemde code is als volgt:

Ga nu verder naar de CSS-sectie voor het stylen van de lijst.

Stap 4: Stijl '.pet-animal' Element

Toegang krijgen tot '

” element met behulp van de toegewezen klasse “ .huisdier ” en pas de vermelde eigenschappen toe:

.huisdier {

grens : 2px gestippeld RGB ( 230 , vijftien , vijftien ) ;

marge : 50px ;

Achtergrond kleur : RGB ( 252 , 239 , 169 ) ;

}

Hier:

• “ grens ” eigenschap wordt gebruikt om de grens rond het element te specificeren.
• “ marge ” definieert de ruimte rond de elementgrens.
• “ Achtergrond kleur ” wijst een kleur toe aan de achterkant van het element.

De resulterende afbeelding toont de uitvoer van de bovenstaande code:

Stap 5: Lijst met toegevoegde stijlen 'li'

Ga nu naar de lijst met de ' div ' container met klasse ' huisdier ' gebruik makend van ' .huisdieren > li ” en pas de onderstaande eigenschappen toe:

.huisdier > Dat {

zichtbaarheid : verborgen ;

ondoorzichtigheid : 0.2 ;

overgang : zichtbaarheid 0s , ondoorzichtigheid 0,5 sec lineair ;

}

Hier:

• De ' zichtbaarheid ” CSS wordt gebruikt om de zichtbaarheid van het element in te stellen zonder de lay-out van een document te wijzigen, zoals verborgen of zichtbaar.
• “ ondoorzichtigheid ” specificeert de transparantie van een element.
• “ overgang ” stelt gebruikers in staat om eigenschapswaarden soepel te wijzigen gedurende een bepaalde periode:

Stap 6: Pseudoklasse 'zweven' toepassen

Pas nu de ' zweven ” eigenschap op de lijst:

.huisdier : zweven > Dat {

zichtbaarheid : zichtbaar ;

ondoorzichtigheid : een ;

}

De ' :zweven ” CSS is een pseudoklasse die tijdens runtime wijzigingen aanbrengt wanneer de muisaanwijzer over het element wordt bewogen. Maak een lijst zichtbaar met behulp van de “ zichtbaarheid ' en stel de transparantie in met de ' ondoorzichtigheid ” CSS-eigenschappen aan de lijst bij zweven:

Geconstateerd kan worden dat we transitie succesvol hebben toegepast op de “ Scherm ' eigenschap.

Gevolgtrekking

De CSS-overgang kan niet rechtstreeks worden toegepast op de ' Scherm ' eigenschap. Het kan echter op een alternatieve manier worden toegepast. Om dit te doen, voegt u de lijsttag toe aan het HTML-document, opent u de lijst op tagnaam en past u ' overgang ”, “ ondoorzichtigheid ', en ' zichtbaarheid ” CSS-eigenschappen op de lijst. Maak dan gebruik van de “ : zweven ” pseudo-klasse en stel de zichtbaarheidswaarde in als “ zichtbaar ”. In dit bericht is uitgelegd hoe de overgang wordt toegepast op de CSS-weergave-eigenschap.