Mit dem Mit dem Tag können Sie Bilder auf Ihrer Website anzeigen. Das
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
Das Tag definiert einen Hyperlink.
Das Tag definiert ein Bild.
Das
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
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!
Der Unterschied zwischen Win7 32-Bit und 64-Bit
Ist Java Front-End oder Back-End?
AccessDenied-Fehlerlösung
Persönliche Bitcoin-Handelsplattform
wenn was bedeutet es
So löschen Sie Mongodb vollständig, wenn die Installation fehlschlägt
Verwendung der Geschwindigkeitsanmerkung
Bereinigen Sie die Registrierung
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
