Heim >Web-Frontend >CSS-Tutorial >Wie erstellen HTML und CSS ein sechseckiges Rasterlayout mit Bildern, Titeln und Text?
Wie erstellen HTML und CSS ein sechseckiges Rasterlayout mit Bildern, Titeln und Text?
- Patricia ArquetteOriginal
- 2024-12-30 12:09:08351Durchsuche
Mit dem Mit dem Tag können Sie Bilder auf Ihrer Website anzeigen. Das
- -Tag erstellt eine ungeordnete Liste und das
- Tag definiert ein Listenelement. Das Tag definiert einen Hyperlink.
Der CSS-Code verwendet die Transformations- und Skew-Eigenschaften, um die Sechseckformen zu erstellen. Die overflow:hidden-Eigenschaft wird verwendet, um die Teile der Bilder auszublenden, die außerhalb der Sechseckform liegen.
Der HTML-Code definiert 24 Sechseckformen, jede mit einem Bild, einem Titel und einem Textabsatz. Der CSS-Code formatiert die Sechseckformen und den Text.
Hier ist eine Aufschlüsselung des HTML- und CSS-Codes:
HTML
Das < ul> Tag definiert eine ungeordnete Liste.
Das
- Tag definiert ein Listenelement.
Das Tag definiert einen Hyperlink.
Das
Tag definiert ein Bild.
Das
Tag definiert eine Überschrift.
Das
Tag definiert einen Absatz.
CSS
Der *-Selektor wählt alle Elemente aus.
Der Rand: 0; und Polsterung: 0; Eigenschaften entfernen den Standardrand und den Standardabstand von allen Elementen.
Der Körperselektor wählt den
Element. Der Hintergrund: rgb(123, 158, 158); Die Eigenschaft legt die Hintergrundfarbe des
fest. Element.Der #hexGrid-Selektor wählt das Element mit der ID „hexGrid“ aus.
Der Überlauf: versteckt; Die Eigenschaft verbirgt die Teile des Bildes, die außerhalb der Sechseckform liegen.
Die Breite: 90 %; Die Eigenschaft legt die Breite des #hexGrid-Elements auf 90 % fest.
Der Rand: 0 auto; Eigenschaft zentriert das #hexGrid-Element.
The padding:0.707% 0; Die Eigenschaft fügt oben und unten am #hexGrid-Element Auffüllungen hinzu.
Der #hexGrid:after-Selektor wählt das Pseudoelement nach dem #hexGrid-Element aus.
Der Inhalt: ""; Die Eigenschaft fügt dem Pseudoelement eine leere Zeichenfolge hinzu.
Die Anzeige: block; Die Eigenschaft legt den Anzeigetyp des Pseudoelements auf Block fest.
Das klare: Both; Die Eigenschaft verhindert, dass das Pseudoelement von anderen Elementen umschlossen wird.
Der .hex-Selektor wählt alle Elemente mit der Klasse „hex“ aus.
Die Position: relativ; Die Eigenschaft legt den Positionstyp des .hex-Elements auf „relativ“ fest.
Der Listenstiltyp: none; Die Eigenschaft entfernt die Standardaufzählungspunkte aus den .hex-Elementen.
Der float: left; Die Eigenschaft verschiebt die .hex-Elemente nach links.
Der Überlauf: versteckt; Die Eigenschaft verbirgt die Teile des Bildes, die außerhalb der Sechseckform liegen.
Die Sichtbarkeit: versteckt; Die Eigenschaft verbirgt die .hex-Elemente.
Die -webkit-transform: rotate(-60deg) skewY(30deg); Die Eigenschaft dreht die .hex-Elemente um -60 Grad und neigt sie um 30 Grad auf der y-Achse.
Die -ms-Transformation: rotation(-60deg) skewY(30deg); Die Eigenschaft dreht die .hex-Elemente um -60 Grad und neigt sie um 30 Grad auf der y-Achse.
Die Transformation: rotation(-60deg) skewY(30deg); Die Eigenschaft dreht die .hex-Elemente um -60 Grad und neigt sie um 30 Grad auf der y-Achse.
Der .hex *-Selektor wählt alle untergeordneten Elemente der .hex-Elemente aus.
Die Position: absolut; Die Eigenschaft legt den Positionstyp der untergeordneten Elemente auf „absolut“ fest.
Die Sichtbarkeit: sichtbar; Eigenschaft macht die untergeordneten Elemente sichtbar.
Der .hexIn-Selektor wählt alle Elemente mit der Klasse „hexIn“ aus.
Die display:block; Die Eigenschaft legt den Anzeigetyp der zu blockierenden .hexIn-Elemente fest.
Die Breite: 100 %; Die Eigenschaft legt die Breite der .hexIn-Elemente auf 100 % fest.
Die Höhe: 100 %; Die Eigenschaft setzt die Höhe der .hexIn-Elemente auf 100 %.
Die text-align: center; Die Eigenschaft zentriert den Text in den .hexIn-Elementen.
Die Farbe: #fff; Die Eigenschaft setzt die Textfarbe der .hexIn-Elemente auf Weiß.
Der Überlauf: versteckt; Die Eigenschaft verbirgt die Teile der Bilder, die außerhalb der Sechseckform liegen.
Die -webkit-transform: skewY(-30deg) rotation(60deg); Die Eigenschaft verzerrt die .hexIn-Elemente um -30 Grad auf der Y-Achse und dreht sie um 60 Grad.
Die -ms-Transformation: skewY(-30deg) rotieren(60deg); Die Eigenschaft neigt die .hexIn-Elemente um -30 Grad auf der y-Achse und dreht sie um 60 Grad.
Die Transformation: skewY(-30deg) rotieren(60deg); Die Eigenschaft neigt die .hexIn-Elemente um -30 Grad auf der y-Achse und dreht sie um 60 Grad.
Die -webkit-backface-visibility: versteckt; Die Eigenschaft verbirgt die Rückseite der .hexIn-Elemente.
Die Sichtbarkeit der Rückseite: versteckt; Die Eigenschaft verbirgt die Rückseite der .hexIn-Elemente.
HEX-INHALT
Der .hex-Bildselektor wählt alle Bilder aus
Das obige ist der detaillierte Inhalt vonWie erstellen HTML und CSS ein sechseckiges Rasterlayout mit Bildern, Titeln und Text?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
- Tag definiert ein Listenelement.