Rechteck - dies ist eine der einfachsten und häufigsten geometrischen Formen. Es besteht aus vier Seiten, die gerade Winkel bilden. Rechtecke werden sowohl im Grafikdesign als auch in der Webentwicklung verwendet.
Um ein Rechteck bis zum Seitenende in HTML zu erstellen, müssen Sie die entsprechenden Stile und Beschriftungen verwenden. In diesem Artikel betrachten wir ein einfaches Beispiel dafür, wie dies möglich ist.
Schritt 1: Erstellen Sie eine Dokumentstruktur
Zuerst müssen Sie eine grundlegende Dokumentstruktur erstellen. Dazu wird ein Tag verwendet. Darin wird ein Tag erstellt, das den gesamten Inhalt der Seite enthält.
Erstellen eines Rechtecks, das die gesamte Seite in HTML ausfüllt
Sie können CSS verwenden, um ein Rechteck zu erstellen, das die gesamte Seite in HTML ausfüllt. Hier ist ein Beispielcode:
- Erstellen Sie eine neue Datei mit der Erweiterung .html und öffnen Sie es in einem beliebigen Texteditor.
- Fügen Sie den folgenden Code innerhalb des Tags hinzu :
- Speichern Sie die Datei und öffnen Sie sie in einem beliebigen Webbrowser. Sie sollten ein Rechteck sehen, das die gesamte Seite ausfüllt.
In diesem Beispiel verwenden wir die CSS-Eigenschaft height: 100%; legt die Höhe des Rechtecks auf 100% der Höhe des Ansichtsfensters fest. Mit der CSS-Eigenschaft background-color legen wir die Hintergrundfarbe des Rechtecks fest.
Dieser Code ist die Grundlage für das Erstellen eines Rechtecks, das die gesamte Seite in HTML ausfüllt. Sie können die Hintergrundfarbe, die Breite und Höhe des Rechtecks ändern und andere Stile nach Belieben hinzufügen.
Erstellen eines Rechtecks in HTML und CSS
Um ein Rechteck zu erstellen, müssen Sie ein Element in HTML verwenden. Mit CSS können Sie die gewünschten Größen und Stile des Rechtecks festlegen.
Hier ist ein Beispiel für ein einfaches Rechteck:
Это прямоугольникIn CSS können Sie eine Klasse verwenden. "rectangle", um den Stil des Rechtecks anzupassen:
.rectangle
Im obigen Beispiel hat das Rechteck eine Breite von 200 Pixeln und eine Höhe von 100 Pixeln. Es hat einen roten Hintergrund, weißen Text, Textzentrierung und 10-Pixel-Einrückungen.
Sie können den Stil des Rechtecks nach Belieben anpassen, indem Sie die Werte der CSS-Eigenschaften ändern.
Jetzt haben Sie eine grundlegende Vorstellung davon, wie Sie ein Rechteck in HTML und CSS erstellen können. Sie können mit verschiedenen Stilen experimentieren, Bilder und Links hinzufügen, um Ihr Rechteck interessanter und ästhetischer zu machen.
Länge und Breite des Rechtecks
Rechteck. dies ist eine geometrische Figur, die vier Seiten hat, die gegenüberliegenden Seiten sind einander gleich und die Winkel sind gerade. Um ein Rechteck bis zum Ende der Seite in HTML zu erstellen, müssen Sie es definieren breite und Höhe.
Die Länge und Breite des Rechtecks werden mithilfe der CSS-Eigenschaften angegeben width und height.
Um beispielsweise ein Rechteck zu erstellen, das die gesamte Breite der Seite einnimmt und eine Höhe von 200 Pixeln aufweist, können Sie den folgenden CSS-Code verwenden:
In diesem Beispiel verwenden wir einen div-Selektor, um Stile auf ein Element anzuwenden, aber Sie können einen beliebigen anderen Selektor verwenden, der Ihrem Markup entspricht.
Eigenschaft width legt die Breite des Elements in Prozent oder in Pixeln fest. Ein Wert von 100% bedeutet, dass das Element die gesamte verfügbare Breite einnimmt.
Eigenschaft height legt die Höhe des Elements in Pixeln fest. In unserem Beispiel ist die Höhe des Rechtecks 200px .
Nachdem dieser Code angewendet wurde, wird das Rechteck in der Breite bis zum Ende der Seite gestreckt und hat eine feste Höhe von 200 Pixeln.
Festlegen der Position des Rechtecks
Um ein Rechteck bis zum Ende einer HTML-Seite zu erstellen, müssen Sie die CSS-Eigenschaften verwenden position und top.
1. Bereiten Sie die HTML-Struktur vor:
Erstellen Sie einen Container, z. B. mit einem Tag :
2. Fügen Sie Stile für den Container hinzu:
Fügen Sie die folgenden CSS-Regeln innerhalb eines Tags oder einer separaten CSS-Datei hinzu:
#rectangle
In diesem Beispiel setzen wir die Position des Elements durch absolute Positionierung ( position: absolute; ). Die Eigenschaft top: 0; gibt an, dass das Rechteck an den oberen Rand der Seite gedrückt werden soll.
Ihr Rechteck wird nun bis zum Ende der Seite gestreckt und hat die von Ihnen angegebene Hintergrundfarbe.
Verwenden der Position-Eigenschaft zum Platzieren eines Rechtecks
Eigenschaft position in CSS wird festgelegt, wie ein Element auf einer Webseite positioniert wird. Es ermöglicht Ihnen, die Position eines Elements relativ zum Browserfenster, zu anderen Elementen oder zu ihm selbst zu steuern.
Verwenden Sie den folgenden Ansatz, um ein Rechteck zu erstellen, das die gesamte Seite ausfüllt:
1. Fügen Sie die folgenden Stile hinzu:
body, html .container .rectangle
2. Erstellen Sie ein Element mit der container-Klasse, und fügen Sie ein Element mit der Rectangle-Klasse darin ein. Ein Element mit der Klasse "container" muss vor allen anderen Elementen auf der Seite platziert werden.
3. Aktualisieren Sie den HTML-Code Ihrer Seite, indem Sie die folgenden Zeilen hinzufügen:
Als Ergebnis erhalten Sie ein Rechteck, das den gesamten verfügbaren Bereich der Seite einnimmt. Wenn Sie die Höhe und Breite für die Body- und HTML-Elemente auf 100% festlegen, wird sichergestellt, dass der Container und das Rechteck die gesamte Höhe und Breite der Seite ausfüllen. Festlegen von position: absolute; ermöglicht es einem Rechteck, unabhängig von anderen Elementen zu sein und es relativ zum Container zu platzieren.
Sie können das Aussehen eines Rechtecks anpassen, indem Sie die Werte der background-Color-Eigenschaften und anderer Stile in CSS ändern.
Adaptives Rechteck: Medienabfragen
Sie können Medienabfragen verwenden, um ein adaptives Rechteck bis zum Ende einer HTML-Seite zu erstellen. Dadurch kann das Rechteck seine Größe und das Seitenverhältnis automatisch an die Breite des Bildschirms anpassen.
Im obigen Beispiel erstellen wir ein Rechteck mit einem Element und geben ihm die Klasse "rectangle" an. Legen Sie die Breite auf 100% und die Höhe auf 300 Pixel fest und legen Sie die Hintergrundfarbe auf Blau fest.
Dann verwenden wir Medienabfragen mit dem Konstrukt "@media screen and (max-width: 600px)", um die Stile des Rechtecks zu ändern, wenn die Bildschirmbreite kleiner oder gleich 600 Pixel ist. In diesem Fall stellen wir die Höhe des Rechtecks auf 200 Pixel ein und ändern die Hintergrundfarbe in Rot.
Dadurch passt sich das Rechteck automatisch an verschiedene Bildschirmgrößen an und ändert seine Größe und sein Aussehen entsprechend den festgelegten Medienabfragebedingungen.
Ein Rechteck mit Farbe füllen
Wenn Sie ein Rechteck erstellen möchten, das die gesamte Breite der Seite einnimmt und bis zum Ende der Seite anliegt, können Sie die CSS-Eigenschaft "background-color" verwenden, um den Hintergrund mit Farbe zu füllen.
Um zu beginnen, benötigen Sie ein Element
Здесь будет текст вашего прямоугольника
Fügen Sie dann die Stile für die Klasse "rectangle" zu Ihrer CSS-Datei hinzu:
.rectangleIn diesem Beispiel haben wir für das Rechteck die Hintergrundfarbe rot ("#FF0000"), die Breite 100%, den Einzug innerhalb des Blocks ("padding") auf 20 Pixel festgelegt, den unteren Einzug ("margin-bottom") auf 0 gesetzt und die Textfarbe weiß.
Jetzt wird Ihr Rechteck die gesamte Breite der Seite einnehmen und es mit der in der Eigenschaft "background-color" angegebenen Farbe füllen. Sie können auch andere Eigenschaften anpassen, um das Erscheinungsbild zu ändern – Schriftart, Textgröße und andere Aspekte.
Hinzufügen von Inhalten zu einem Rechteck
Nachdem wir ein Rechteck mit HTML und CSS erstellt haben, können wir den Inhalt darin einfügen.
Dazu können wir verschiedene HTML-Tags verwenden, einschließlich:
- : Tag zum Erstellen eines Textabsatzes. Wir können es verwenden, um Absätze innerhalb eines Rechtecks hinzuzufügen.
- und : Tags, um ungeordnete und geordnete Listen entsprechend zu erstellen. Wir können sie verwenden, um Listen innerhalb eines Rechtecks hinzuzufügen.
- : Tag zum Erstellen eines Listenelements. Wir können es in Kombination mit Tags verwenden und Listenelemente innerhalb eines Rechtecks hinzufügen.
Im Folgenden finden Sie einen Beispielcode, der zeigt, wie Sie Inhalte mithilfe dieser Tags hinzufügen:
- Listenelement 1
- Listenelement 2
- Listenelement 3
Wir haben zwei Textabschnitte und eine Liste mit drei Elementen innerhalb des Rechtecks hinzugefügt.
Beachten Sie, dass wir die Klasse "rectangle" verwendet haben, um das Rechteck zu stylen. Sie können jede Klasse oder ID verwenden, die zu Ihren Stilen passt.
Konvertieren eines Rechtecks in eine Verknüpfung oder Schaltfläche
Ein Rechteck auf einer HTML-Seite kann in einen Link oder eine Schaltfläche konvertiert werden, um es interaktiv zu machen und Funktionalität hinzuzufügen.
Um ein Rechteck in eine Schaltfläche zu konvertieren, müssen Sie ebenfalls ein Tag verwenden . Dazu müssen Sie das Tag innerhalb des Tags platzieren und die type-Attribute auf "button" und onclick festlegen, um die JavaScript-Funktion anzugeben, die beim Klicken auf die Schaltfläche ausgeführt wird.
In diesem Beispiel wird die JavaScript-Funktion myFunction() aufgerufen, wenn Sie auf die Schaltfläche "Rechteck in Schaltfläche" klicken.
