Wie erstelle ich eine vertikale Linie in HTML CSS

Eine vertikale Linie ist ein wichtiges Element des Webdesigns, das verwendet werden kann, um verschiedene Abschnitte zu trennen oder eine einzigartige Komposition auf einer Seite zu erstellen. Es gibt mehrere Möglichkeiten, eine vertikale Linie in HTML und CSS zu erstellen, die je nach Ihren Bedürfnissen und Vorlieben verwendet werden können.

Eine der einfachsten Methoden zum Erstellen einer vertikalen Linie besteht darin, das Pseudo-Element ::before oder ::after zu verwenden und die gewünschten Stile festzulegen. Zum Beispiel können Sie den folgenden CSS-Code verwenden:

In diesem Beispiel haben wir ein Element mit der Klasse "line" erstellt und es auf eine Breite von 1 Pixel und eine Höhe von 100 Pixeln festgelegt. Dann haben wir das Pseudo-Element ::before erstellt, das ein untergeordnetes Element von "line" ist und genau in der Mitte positioniert ist. Wir haben die translateX-Eigenschaft(-50%) verwendet, um das Pseudoelement um 50% nach links zu seiner ursprünglichen Position zu verschieben.

Eine andere Möglichkeit, eine vertikale Linie zu erstellen, besteht darin, ein Sonderzeichen oder ein Bild zu verwenden. Sie können das vertikale Strich-Symbol (|) verwenden oder ein Bild mit einem Tag hochladen . Zum Beispiel:

In diesem Beispiel haben wir ein Element mit der Klasse "line" erstellt und es auf eine Breite von 1 Pixel und eine Höhe von 100 Pixeln festgelegt. Wir haben auch die Eigenschaft overflow: hidden verwendet, um den überflüssigen Teil der Linie auszublenden.

Dies sind nur einige der Möglichkeiten, eine vertikale Linie in HTML und CSS zu erstellen. Sie müssen den für Ihr Projekt am besten geeigneten auswählen und in Ihr Design einbetten.

Erstellen einer vertikalen Linie in HTML und CSS

Vertikale Linien können zum Erstellen von Abschnitten und zum Abgrenzen von Inhalten auf einer Webseite nützlich sein. Es gibt mehrere Möglichkeiten, vertikale Linien in HTML und CSS zu erstellen.

1. Verwenden eines Elementrahmens:

Erstellen Sie einen Container, in dem die vertikale Linie platziert werden soll:

2. Verwenden des Pseudoelements ::before:

Fügen Sie dem Element, dem Sie eine vertikale Linie hinzufügen möchten, eine Klasse hinzu:

3. Mit einem Hintergrundbild:

Fügen Sie dem Element, dem Sie eine vertikale Linie hinzufügen möchten, eine Klasse hinzu:

Wählen Sie je nach Ihren Bedürfnissen und Vorlieben eine geeignete Methode zum Erstellen einer vertikalen Linie aus. Diese Methoden können auch kombiniert und angepasst werden, um den gewünschten visuellen Effekt zu erzielen.

Verwenden des Pseudoelements before

table:before 

In diesem Beispiel geben wir an, dass für alle Tabellen auf der Seite das Pseudo-Element ::before verwendet werden muss, das vor der Tabelle angezeigt wird und den im table:before-Block angegebenen Stil hat.

In unserem Fall hat das Pseudoelement ::before eine Breite von 1 Pixel und die Randfarbe ist schwarz. Außerdem legen wir die Höhe der Linie fest, die Sie nach Belieben ändern können, und legen den Abstand zwischen Element und Linie sowie die vertikale Ausrichtung fest.

Um einem anderen Element eine vertikale Linie hinzuzufügen, ändern Sie einfach den Selektor im Block :before .

Also unter Verwendung eines Pseudoelements ::before Es ist möglich, vertikale Linien in HTML und CSS zu erstellen, um das Design Ihrer Webseite zu verbessern.

Verwenden der border-left-Eigenschaft

Sie können die border-left-Eigenschaft verwenden, um eine vertikale Linie in HTML und CSS zu erstellen. Mit dieser Eigenschaft können Sie den Stil, die Breite und die Farbe des linken Randes des Elements festlegen.

Um eine vertikale Linie mit border-left zu erstellen, müssen Sie die Eigenschaft border-left-width (Linienbreite), border-left-style (Linienstil) und border-left-color (Linienfarbe) auf einen Wert festlegen.

Beispiel für die Verwendung der border-left-Eigenschaft zum Erstellen einer vertikalen Linie:

In diesem Beispiel wird ein Block mit der Klasse line erstellt, der einen schwarzen linken Rand mit dem Stil solid (durchgezogene Linie) und einer Breite von 2 Pixeln hat. Die Blockhöhe ist auf 200 Pixel festgelegt, sodass eine vertikale Linie sichtbar ist.

Beachten Sie, dass die border-left-Eigenschaft auf jedes HTML-Element angewendet werden kann, einschließlich Block- und Kleinbuchstaben.

Verwenden eines Hintergrundbildes

Sie können vertikale Linien mit einem Hintergrundbild erstellen. Dadurch können Sie das Erscheinungsbild der Linie flexibler steuern und anpassen.

Um eine vertikale Linie mit einem Hintergrundbild hinzuzufügen, müssen Sie eine Klasse oder eine ID für das Element erstellen, das die Linie enthalten soll. Sie können beispielsweise ein Tag verwenden .

Dann müssen Sie diese Klasse oder ID in der CSS-Datei konfigurieren, indem Sie die Eigenschaft background-image verwenden, um ein Hintergrundbild hinzuzufügen. Zum Beispiel:

• Erstellen Sie ein Bild für eine vertikale Linie - Sie können einen Grafikeditor verwenden oder ein fertiges Bild im Internet finden.
• Speichern Sie das Bild im PNG-Format, um die Transparenz zu erhalten.
• Fügen Sie in der CSS-Datei den folgenden Code hinzu, um das Hintergrundbild anzupassen:

.vertical-line 

Stellen Sie sicher, dass Sie den richtigen Bildpfad in der url() -Eigenschaft angeben. Wenn sich das Bild im selben Ordner wie die CSS-Datei befindet, können Sie den Pfad einfach anhand des Dateinamens angeben. Wenn sich das Bild in einem anderen Ordner befindet, müssen Sie den vollständigen Pfad zum Bild angeben.

Danach wird das Element mit der Klasse "vertical-line" eine vertikale Linie unter Verwendung des angegebenen Hintergrundbilds haben. Dadurch können Sie zusätzliche Stile und Effekte hinzufügen, z. B. die Farbe oder den Schatten einer Linie ändern.

Verwenden der transform-Eigenschaft

Erstellen Sie zunächst eine Tabelle mit zwei Zellen:

Um eine vertikale Linie zwischen Zellen hinzuzufügen, gelten die folgenden Stile:

• Setzen Sie display: flex; für das übergeordnete Tabellenelement, um seinen Fluss in Flex zu ändern.
• Fügen Sie border-left hinzu: 1px solid black; für die erste Zelle, um eine vertikale Linie zu erstellen.

Hier ist ein Codebeispiel mit der transform-Eigenschaft :

border-left: 1px solid black;

Die Eigenschaft translateX() mit einem negativen Wert von 50% wird auf die erste Zelle angewendet und um die Hälfte der Breite nach links verschoben. Dadurch können Sie eine vertikale Linie in der Mitte zwischen den Zellen platzieren.

Also haben wir mit der transform-Eigenschaft eine vertikale Linie zwischen zwei Tabellenzellen hinzugefügt. Dies ist eine Möglichkeit, einen ähnlichen Effekt in HTML und CSS zu implementieren. Sie können diese Methode mit anderen CSS-Eigenschaften anpassen, um das gewünschte Ergebnis zu erzielen.

Beispiele für vertikale Linie mit Code

Es gibt mehrere Möglichkeiten, eine vertikale Linie mit HTML und CSS zu erstellen. Betrachten wir zwei von ihnen:

1. Verwenden des Pseudoelements ::before

.vertical-line .vertical-line::before

Um eine vertikale Linie zu erstellen, verwenden wir das Pseudo-Element ::before, das die Breite auf 1 Pixel festlegt und den Rahmenstil angibt. Dann ziehen wir uns mit Hilfe der Positionierung um die Hälfte der Breite des Elements vom linken Rand zurück.

2. Verwenden einer Grenze mit negativem Einzug

.vertical-line

In diesem Beispiel erstellen wir eine vertikale Linie, indem wir die Breite des Elements auf 0 setzen und den Rahmenstil festlegen. Dann verschieben wir die Linie mit einem negativen Einzug um die Hälfte ihrer Breite relativ zum übergeordneten Element. Die transform: translateX-Eigenschaft(-50%) wird zum Zentrieren verwendet.

Vertikale Linie stilisieren

Sie können mehrere Ansätze verwenden, um eine vertikale Linie in HTML und CSS zu erstellen.

1. Verwenden des Pseudoelements before oder after:

.vertical-line .vertical-line::before

2. Verwenden des After-Pseudoelements und des Farbverlaufs:

.vertical-line .vertical-line::after

3. Verwenden eines Hintergrundbildes:

.vertical-line

Die Auswahl der Methode hängt vom gewünschten Erscheinungsbild und den Bedürfnissen des Projekts ab. Mit all diesen Methoden können Sie eine vertikale Linie in HTML und CSS erstellen.

Ändern von Farbe und Linienstärke

Sie können die border-color-Eigenschaft verwenden, um die Linienfarbe in CSS zu ändern. Hier ist ein Beispielcode:

In diesem Beispiel wird eine line-Klasse erstellt, die eine Linienstärke von 2 Pixeln und eine Linienfarbe von Blau definiert.

Sie können auch einen Wert im HEX- oder RGB-Format verwenden. Zum Beispiel:

In beiden Beispielen wird die Linienfarbe rot angezeigt.

Sie können die border-width-Eigenschaft verwenden, um die Linienstärke zu ändern. Hier ist ein Beispielcode:

In diesem Beispiel wird eine line-Klasse mit einer Linienstärke von 5 Pixeln und einer Linienfarbe von Schwarz erstellt. Auf diese Weise wird die Linie eine größere Dicke haben.

Hinzufügen einer Bildlaufleiste

Manchmal enthalten Webseiten möglicherweise zu viele Inhalte, um sie in einem einzigen Fenster zu platzieren. Daher müssen Sie eine Bildlaufleiste hinzufügen, damit Benutzer die Seite leicht durchblättern und den gesamten Inhalt anzeigen können. In HTML und CSS gibt es mehrere Möglichkeiten, einer Seite eine Bildlaufleiste hinzuzufügen.

Der erste Weg besteht darin, die Overflow-Eigenschaft in CSS zu verwenden. Die Overflow-Eigenschaft steuert, wie der Browser Inhalte verarbeitet, die außerhalb der Grenzen seines Containers liegen. Um eine vertikale Bildlaufleiste hinzuzufügen, können Sie den overflow-y: scroll-Wert für den zu scrollenden Container festlegen:

/* HTML */
.
 /* CSS */.scroll-container height: 400px;overflow-y: scroll;>

Die zweite Methode besteht darin, die Eigenschaft overflow-x für die horizontale Bildlaufleiste und overflow-y für die vertikale Bildlaufleiste zu verwenden. Wenn Sie beispielsweise Bildlaufleisten für vertikale und horizontale Richtungen hinzufügen möchten, können Sie den Wert overflow: scroll festlegen:

/* HTML */
.
 /* CSS */.scroll-container height: 400px;overflow: scroll;>

Die dritte Möglichkeit besteht darin, die Eigenschaft overflow: auto zu verwenden. Diese Eigenschaft fügt nur dann automatisch Bildlaufleisten hinzu, wenn der Inhalt außerhalb des Containers liegt.

/* HTML */
.
 /* CSS */.scroll-container height: 400px;overflow: auto;>

Die Wahl einer bestimmten Methode hängt von den Designanforderungen und der Funktionalität der Seite ab. Sie können die am besten geeignete Option für Ihr Projekt auswählen, um den Inhalt Ihrer Seite für Benutzer bequem zu scrollen.