Web-Entwicklung wird von Tag zu Tag immer beliebter. Wenn Sie lernen möchten, interessante und spektakuläre Elemente auf Ihrer Website zu erstellen, ist es an der Zeit zu lernen, wie man einen Kreis in HTML erstellt. Kreise sind universelle Designelemente, die zum Erstellen von Logos, Schaltflächen oder zum Hinzufügen von Stil und Ästhetik zu einer Seite verwendet werden können.
Das Erstellen eines Kreises in HTML ist ziemlich einfach. Sie benötigen nur ein paar Zeilen Code, und Sie können Ihren eigenen Kreis mit einem Tag erstellen . Erstellen Sie zunächst eine neue HTML-Datei und öffnen Sie sie in Ihrem bevorzugten Texteditor oder platzieren Sie den Code auf einer vorhandenen Seite.
Das Erstellen eines Kreises in HTML beginnt mit der Definition von Stilen für Ihr Element. Sie können dazu CSS verwenden, indem Sie einen neuen Block erstellen . Legen Sie die Breite und Höhe Ihres Kreises mit dem gleichen Wert für beide Eigenschaften fest, um einen Kreis anstelle einer Ellipse zu erstellen. Legen Sie dann den Umgrenzungsradius des Elements auf die Hälfte der angegebenen Breite und Höhe fest, um es rund zu machen. Zum Beispiel:
Wie erstelle ich einen Kreis in HTML
Hier ist ein Beispielcode, mit dem Sie einen Kreis in HTML erstellen können:
In diesem Beispiel werden Breite und Höhe angegeben div das Element ist 100 Pixel groß und der Umgrenzungsradius wird auf 50% festgelegt, wodurch das Rechteck in einen Kreis umgewandelt wird. Die Hintergrundfarbe wird ebenfalls angegeben, in diesem Fall ist sie rot. Sie können diese Werte ändern, um einen Kreis mit der gewünschten Größe und Farbe zu erstellen.
Für komplexere Stile und Kreisanimationen können Sie CSS-Klassen und Deklarationen von externen Stilen verwenden. Zum Beispiel:
In diesem Beispiel wird eine Klasse erstellt circle gibt die Stile für den Kreis an, einschließlich Größe, Form, Hintergrundfarbe und Animation. Dann wenden wir die Klasse an div Elemente.
Ich hoffe, diese Beispiele helfen Ihnen, einen Kreis in HTML zu erstellen und zu kreativeren Ideen zu inspirieren. Viel Glück bei Ihren Projekten!
Vorbereitung und erste Schritte
Bevor Sie mit dem Erstellen eines Kreises in HTML beginnen, müssen Sie einige Dinge im Voraus vorbereiten. Stellen Sie zunächst sicher, dass Sie über einen richtigen Code-Editor wie Sublime Text, Visual Studio Code oder Atom verfügen. Zweitens, erstellen Sie eine neue HTML-Datei und speichern Sie sie mit der Erweiterung. "html".
Nachdem Sie den Editor vorbereitet und eine neue Datei erstellt haben, können Sie mit der Arbeit selbst beginnen. Beginnen Sie mit dem Schreiben der folgenden Codezeilen:
- dies ist ein Hinweis darauf, dass Sie mit HTML5 arbeiten.
- ein öffnendes Tag, das angibt, dass es sich bei dem Inhalt um eine Webseite handelt.
- ein öffnendes Tag, in dem Metadaten und Links zu externen Dateien eingefügt werden sollen.
- ein öffnendes Tag, in dem der Titel der Webseite angegeben werden soll.
- schließendes Tag für den Titel einer Webseite.
- schließendes Tag für den Abschnitt "head".
- ein sich öffnendes Tag, in dem sich der Inhalt der Webseite befindet.
- schließendes Tag für den Abschnitt "body".
- ein schließendes Tag, das angibt, dass die Webseite abgeschlossen ist.
Nachdem Sie diese grundlegenden Tags hinzugefügt haben, können Sie mit dem Erstellen eines Kreises mit zusätzlichen HTML-Elementen und CSS-Stilen beginnen.
Erstellen eines Kreises
Erstellen Sie zunächst eine Tabelle mit einer einzelnen Zelle:
Wenden Sie jetzt Stile an, um eine quadratische Zelle in einen Kreis zu verwandeln. Fügen Sie dazu den folgenden Code hinzu:
In diesem Beispiel haben wir die Attribute border-radius und background-color verwendet, um den Kreis zu stylen. border-radius gibt den Rundungsradius der Ecken der Zelle an, und background-color ist die Füllfarbe des Kreises (in diesem Fall rot).
Jetzt ist der Kreis fertig! Abschließend können Sie die Zellengrößen mithilfe des Attributs width und height festlegen :
Das Ergebnis ist ein Kreis mit einer Breite und Höhe von 100 Pixeln.
Auf diese Weise kann das Erstellen eines Kreises auf einer Webseite mit einfachen HTML-Tags und CSS-Stilen erreicht werden. Sie können die Größe, Farbe und andere Stiloptionen ändern, um die gewünschte Kreisansicht auf Ihrer Seite zu erstellen.
