Schritt 2: Fügen Sie eine Überschrift hinzu

Fügen Sie als Nächstes eine Überschrift ein, indem Sie ein beliebiges „

' zu '

' Stichworte. Zum Beispiel, '

“ fügt eine Überschrift hinzu.

Schritt 3: Daten zur Liste hinzufügen

Um die Daten in Form einer Liste einzufügen, verwenden Sie das „ ' Schild:

---

---

< div Klasse = 'Haustier Tier' >

< h1 > Liste der Heimtiere < / h1 >

< das > Henne < / das >

< das > Ente < / das >

< das > Hund < / das >

< das > Katze < / das >

< das > Kaninchen < / das >

< / div >

Die Ausgabe des oben genannten Codes sieht wie folgt aus:

Gehen Sie nun zum CSS-Abschnitt, um die Liste zu gestalten.

Schritt 4: Gestalten Sie das Element „.pet-animal“.

Greife auf ... zu '

„Element mit Hilfe der zugeordneten Klasse“ .Haustier Tier “ und wenden Sie die aufgelisteten Eigenschaften an:

.Haustier Tier {

Grenze : 2px gepunktet rgb ( 230 , fünfzehn , fünfzehn ) ;

Rand : 50px ;

Hintergrundfarbe : rgb ( 252 , 239 , 169 ) ;

}

Hier:

• „ Grenze ”-Eigenschaft wird verwendet, um die Grenze um das Element herum anzugeben.
• „ Rand ” definiert den Raum um die Elementgrenze herum.
• „ Hintergrundfarbe ” weist der Rückseite des Elements eine Farbe zu.

Das resultierende Bild zeigt die Ausgabe des obigen Codes:

Schritt 5: Style Added List „li“

Greifen Sie jetzt auf die Liste der „ div „Container mit Klasse“ Haustier Tier ” mit “ .Haustier > li “ und wenden Sie die unten genannten Eigenschaften an:

.Haustier Tier > das {

Sichtweite : versteckt ;

Opazität : 0,2 ;

Überleitung : Sichtweite 0s , Opazität 0,5 Sek linear ;

}

Hier:

• Die ' Sichtweite ” CSS wird verwendet, um die Sichtbarkeit des Elements festzulegen, ohne das Layout eines Dokuments zu ändern, z. B. versteckt oder sichtbar.
• „ Opazität “ gibt die Transparenz eines Elements an.
• „ Überleitung ” ermöglicht es Benutzern, Eigenschaftswerte über einen bestimmten Zeitraum hinweg reibungslos zu ändern:

Schritt 6: Wenden Sie die „Hover“-Pseudoklasse an

Wenden Sie jetzt das „ schweben ” Eigenschaft auf der Liste:

.Haustier Tier : schweben > das {

Sichtweite : sichtbar ;

Opazität : einer ;

}

Die ' :schweben ” CSS ist eine Pseudo-Klasse, die zur Laufzeit Änderungen vornimmt, wenn der Mauszeiger über das Element bewegt wird. Machen Sie eine Liste sichtbar mit dem „ Sichtweite “ und stellen Sie die Transparenz mit dem „ Opazität ” CSS-Eigenschaften zur Liste beim Hover:

Es kann beobachtet werden, dass wir den Übergang erfolgreich auf die „ Anzeige ' Eigentum.

Fazit

Der CSS-Übergang kann nicht direkt auf die „ Anzeige ' Eigentum. Es kann jedoch auch auf andere Weise angewendet werden. Fügen Sie dazu das Listen-Tag zum HTML-Dokument hinzu, greifen Sie über den Tag-Namen auf die Liste zu und wenden Sie „ Überleitung “, „ Opazität ', und ' Sichtweite ” CSS-Eigenschaften auf der Liste. Verwenden Sie dann die „ : schweben ” Pseudo-Klasse und setzen Sie den Sichtbarkeitswert auf „ sichtbar “. In diesem Beitrag wurde erklärt, wie der Übergang auf die CSS-Anzeigeeigenschaft angewendet wird.