Wie lege ich eine vertikale Trennlinie in HTML fest? Code-Erklärung der vertikalen Trennlinie in HTML-HTML-Tutorial-php.cn

Wie lege ich eine vertikale Trennlinie in HTML fest? Code-Erklärung der vertikalen Trennlinie in HTML

不言

Freigeben： 2018-10-31 14:14:05

Original

27869 Leute haben es durchsucht

Wir wissen, dass horizontale HTML-Trennlinien einfach zu implementieren sind. Verwenden Sie einfach das

-Tag. Wie implementiert man also vertikale HTML-Trennlinien? In diesem Artikel erfahren Sie, wie Sie vertikale Trennlinien in HTML implementieren.

PS: Informationen zur Implementierung der horizontalen HTML-Trennlinie finden Sie in diesem Artikel: „Wie stelle ich die horizontale HTML-Trennlinie ein?“ Erläuterung von Codebeispielen für horizontale HTML-Trennlinien》

Gehen wir direkt zur Implementierungsmethode für vertikale HTML-Trennlinien

Es gibt keine direkte Methode zum Implementieren einer vertikalen Trennlinie in HTML Daher müssen wir andere Methoden verwenden, um eine vertikale Trennlinie zu erzielen. Schauen wir uns an, welche Methoden den Effekt einer vertikalen Trennlinie erzielen können.

Die erste vertikale Trennlinie. Implementierungsmethode: Verwenden Sie Bindestrichzeichen auf der Tastatur

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<span>内容</span>|<span>内容</span>
</div>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Wie lege ich eine vertikale Trennlinie in HTML fest? Code-Erklärung der vertikalen Trennlinie in HTML

Beschreibung: Obwohl diese Methode einfach und bequem ist, kann sie nicht gut kontrolliert werden.

Die zweite Methode zum Implementieren der vertikalen Trennlinie: Verwenden Sie border, um die vertikale Trennlinie zu implementieren

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width:200px;float:left;height:200px;">内容区域</div>
<div style="border:1px solid ;float:left;height:200px;"></div><!--这个div模拟垂直分割线-->
<div style="width:200px;float:left;height:200px;">内容区域</div>
</body>
</html>

Nach dem Login kopieren

The Der Effekt ist wie folgt:

Wie lege ich eine vertikale Trennlinie in HTML fest? Code-Erklärung der vertikalen Trennlinie in HTML

Die dritte Möglichkeit, vertikale Trennlinien zu implementieren: Rahmen und Polsterung verwenden

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.span1{
padding:12px 6px 200px 6px;
margin-left: 6px;
border-left: 1px solid;
font-size: 0;
}
</style>
</head>
<body>
<div>
<span>内容区域</span>
<span class="span1"></span>
<span>内容区域</span>
</div>
</body>
</html>

Nach dem Login kopieren

Die Der Effekt ist wie folgt:

Wie lege ich eine vertikale Trennlinie in HTML fest? Code-Erklärung der vertikalen Trennlinie in HTML

Erklärung: Der Hauptzweck der Verwendung von Polsterung besteht hier darin, die Höhe der vertikalen Linien zu steuern.

Die vierte Methode zur Implementierung vertikaler Trennlinien: Verwenden Sie Hintergrundbilder, um vertikale Trennlinien zu implementieren

Bei dieser Methode können Sie verschiedene Farben und verschiedene Arten von Unterteilungen auswählen Wenn Sie jedoch die Größe des Bildes anpassen, insbesondere die Breite, erscheinen die Kanten bis zu einem gewissen Grad gezackt. Um die Farbe des Bildes anzupassen, müssen Sie es außerdem in ein anderes Bild ändern, was nicht förderlich ist auf spätere Anpassungen. Deshalb werde ich nicht viel mehr sagen. Freunde, die Interesse haben, können es selbst ausprobieren.

Dieser Artikel endet hier. Weitere spannende Inhalte finden Sie im HTML-Tutorial auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWie lege ich eine vertikale Trennlinie in HTML fest? Code-Erklärung der vertikalen Trennlinie in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!