CSS -Hexagon
Ein Sechseck ist eine mathematische, geometrische Form, die als Polygon mit 6 Kanten bezeichnet wird. Um ein Sechseck zu entwerfen, werden wir HTML und CSS verwenden.”
CSS
CSS ist hauptsächlich von drei Arten. Jeder Typ hängt vom Ort seiner Erklärung ab. Einer ist Inline, das in den HTML -Tags geschrieben ist. Der zweite ist intern, geschrieben im Kopfabschnitt von HTML -Tags. Das dritte ist externer CSS, das außerhalb des HTML -Codes und der HTML -Datei in einer anderen Datei mit der CSS -Erweiterung deklariert wird. Wir werden mit dem internen CSS bei der Gestaltung von Hexagon gehen. Die Öffnungs- und Schließetiketten für das interne CSS sind:
Werkzeug
Die grundlegenden Tools zum Erstellen einer einfachen statischen Webseite sind ein Texteditor und jeder Browser. Sie können jeden Texteditor verwenden. In diesem Artikel verwenden wir jedoch einen einfachen Windows -Standardtexteditor und Chrome als Browser. Wir schreiben den HTML -Code oder die Tags im Editor und führen diese Datei im Browser aus.
Voraussetzung
Es gibt keine Voraussetzungen für ein Tool oder eine Software. Aber der Benutzer muss ein Know-how von HTML-Tags haben, da die Grundlagen beim Aufbau eines Sechsecks und des Entwerfens erforderlich sind. HTML -Tags enthalten zwei Hauptteile, Kopf und Körper.
Während einige andere Tags zum Zeitpunkt der Implementierung mit Code erklärt werden.
Implementierung von Sechseck
Öffnen Sie für die Implementierung den Notizblock und starten Sie den HTML -Code. Innerhalb des Kopfteils haben wir den Titelnamen als Sechseck verwendet; Dies wird in der Registerkarte angezeigt. Auf dem Weg zu internen CSS. Innerhalb des Style -Tags haben wir eine Erklärung der Sechskantklasse erstellt.
In CSS, hauptsächlich im internen und externen Styling, nutzen wir IDs und Klassen, um den Code kurz und leicht verständlich zu machen. Hier stellt sich die Frage, wie diese Klassen und ID funktionieren. Alle Merkmale und Effekte, die wir auf jedes von uns erstellte Objekt anwenden möchten, werden in der Klasse oder im Körper der ID erwähnt. Diese IDs und Klassen werden durch die Verwendung ihrer Namen in den Tags zugegriffen, in denen wir einen Effekt anwenden möchten. Hier haben wir also eine Sechskant -ID im Style -Tag erstellt. Diese ID wird zum Zeitpunkt der Erstellung des Sechsecks angewendet. Im Sechseckkörper haben wir einen Ort erklärt, an dem wir die Form zeichnen; Dafür haben wir zwei Funktionen verwendet, einer ist der Oberteil und der andere ist die linke. Das „Oberteil“ entscheidet den Abstand von oben zur Form. Und die linke entscheidet den Abstand vom linken Rand zur Form. Es kann in Prozent oder einer anderen Einheit geschrieben werden.
Top 20;
Links: 10%;
Der Grenzrand wird als automatisch festgelegt. Auf diese Weise ist der Ort der Form eingestellt. Jetzt werden wir eine Farbe auf die Form anwenden. Dies ist die Hintergrundfarbe zu sein. Wir haben die Magenta ausgewählt.
Hintergrundfarbe: Magenta;
Das Polygon -Sechseck wird durch Ecken oder gekrümmte Punkte gebildet. Um die Punkte gebogen zu machen, werden wir ein Merkmal des Grenzradius hinzufügen, um es reibungslos gekrümmt zu machen, anstatt raue Kanten zu haben.
Border-Radius: 10px;
Hier ist der Wert in der Pixel -Einheit geschrieben. Jetzt werden wir uns entscheiden, Form, Größe und Breite zu geben. Diese beiden Funktionen sind der Baustein zum Erstellen und Styling einer Form. Es wird immer empfohlen, eine Form oder ein Text in einem bestimmten Feld geschrieben oder gezeichnet zu werden. Diese Box hilft beim Umgang mit dem Objekt sehr leicht. Also haben wir hier eine Grenzkiste deklariert.
CSS | Pseudoelemente/Klasseneigenschaften
Diese Eigenschaft wird verwendet, um die Formleitungen bei 60 Grad zu drehen und ein perfektes Sechseck zu machen. Ein CSS-Pseudoelement ist eine Art von Styling, mit der ein bestimmter Teil des Elements gestaltet wird. Zum Beispiel enthält es die erste Zeile der Form. Alle diese Inhalte werden vor und nach dem Inhalt der Form angewendet. Wir können jede Funktion auf diese Weise anwenden.
Der Inhalt und die Grenze sind einige integrierte Merkmale von Pseudo-Eigentum. Alle anderen Merkmale von Höhe, Breite und Farbe sind die gleichen wie wir in der einfachen ID -Beschreibung des Sechsecks beschrieben haben.
Jetzt werden alle oben genannten Merkmale als zwei Teile deklariert, die für ein Sechskant angewendet werden sollen.
.Hexagon: Vor
Transformation: Drehung (60 Grad);
Ein ähnliches Merkmal ist für den verbleibenden Teil des Sechsecks; Alle Formen werden erzeugt, indem ein bestimmter Winkel für Polygon 60 Grad zwischen zwei alternativen Linien gebildet wird.
Der Stil und die Kopf -Tags sind jetzt geschlossen. Stellen Sie sicher, dass alle von Ihnen geöffneten Tags geschlossen werden müssen, damit sie im Code angewendet werden. Ansonsten können einige Effekte verloren gehen. Jetzt zum Körperteil führen.
Hier haben wir eine einfache Textüberschrift verwendet, um eine Zeile zu schreiben. Dieser Stil ist ein Beispiel für das Inline -Styling.
< body style = "text-align : left"<
Wir haben eine Ausrichtung des Text.
Nach dem Text deklarieren wir den Code für die Sechskantform. Div ist ein Behälter wie eine Tabelle in HTML. Das wird verwendet, um Objekte in einer geraden Position zu enthalten. Im Div -Körper werden die CSS -Klasse und der ID -Name so erklärt. Schließen Sie alle geöffneten Tags, ich.e., Div, Körper und HTML.
Wir speichern die Datei des Notizblocks mit dem “.HTML ”Erweiterung zum Erstellen einer Webseite. Diese Datei wird als „Beispiel) gespeichert.html.”Mit dieser Erweiterung wird das Symbol der Datei als Symbol des Standardbrowsers festgelegt.
Wenn wir die Datei im Browser ausführen.
Abschluss
Ein Hexagon -Diagramm wird gebildet, indem mit HTML mit dem Kaskadenstilblatt eingebettet wird. Zu Beginn sprechen wir über die Grundlagen von HTML. Und die Arten von CSS werden auch erklärt, um jede Art von Unklarheiten in Bezug auf CSS -Typen zu beseitigen. Es werden zwei grundlegende Tools erwähnt, die für die Erstellung und Ausführung von HTML- und CSS -Tags unerlässlich sind. Das Hexagon-Beispiel wird implementiert und erläuter. Eine einzigartige Art, eine Form zu schaffen, wird durch die CSS-Pseudo-Element-Eigenschaft erklärt. Am Ende haben wir die statische Webseite gezeigt, die aufgrund des definierten Codes gebildet wird.