Comment définir une ligne de séparation verticale en HTML ? Explication du code de la ligne de séparation verticale HTML-tutoriel HTML-php.cn

Comment définir une ligne de séparation verticale en HTML ? Explication du code de la ligne de séparation verticale HTML

不言

Libérer： 2018-10-31 14:14:05

original

27826 Les gens l'ont consulté

Nous savons que les lignes de séparation horizontales HTML sont faciles à mettre en œuvre, il suffit d'utiliser la balise

Cet article vous présentera comment implémenter des lignes de séparation verticales en HTML.

PS : concernant la façon d'implémenter la ligne de séparation horizontale html, vous pouvez lire cet article : "Comment définir la ligne de séparation horizontale html ? Explication des exemples de code pour les lignes de séparation horizontales HTML》

Passons directement à la méthode d'implémentation des lignes de séparation verticales HTML

Il n'existe pas de méthode directe pour implémenter une ligne de séparation verticale en HTML , nous devons donc utiliser d'autres méthodes pour obtenir une ligne de démarcation verticale. Voyons quelles méthodes peuvent obtenir l'effet d'une ligne de démarcation verticale

La première ligne de démarcation verticale Méthode de mise en œuvre : Utilisez le caractères tirets

sur le clavier Le code est le suivant :

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

Copier après la connexion

L'effet est le suivant :

Comment définir une ligne de séparation verticale en HTML ? Explication du code de la ligne de séparation verticale HTML

Instructions : Bien que cette méthode soit simple et pratique, elle ne permet pas un bon contrôle.

La deuxième méthode pour implémenter la ligne de démarcation verticale : utiliser la bordure pour implémenter la ligne de démarcation verticale

Le code est le suivant :

<!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>

Copier après la connexion

L'effet est le suivant :

Comment définir une ligne de séparation verticale en HTML ? Explication du code de la ligne de séparation verticale HTML

La troisième façon d'implémenter des lignes de séparation verticales : utiliser la bordure et le remplissage

<!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>

Copier après la connexion

effets Comme suit :

Comment définir une ligne de séparation verticale en HTML ? Explication du code de la ligne de séparation verticale HTML

Remarque : le remplissage est utilisé ici principalement pour contrôler la hauteur des lignes verticales.

La quatrième méthode pour implémenter des lignes de séparation verticales : utilisez des images d'arrière-plan pour implémenter des lignes de séparation verticales

Dans cette méthode, vous pouvez choisir différentes couleurs et différents types de divisions à des lignes ; cependant, lors de l'ajustement de la taille de l'image, en particulier de la largeur, les bords apparaîtront irréguliers dans une certaine mesure. De plus, pour ajuster la couleur de l'image, vous devez la changer pour une autre image, ce qui n'est pas propice. à des ajustements ultérieurs. Je n’en dirai donc pas beaucoup plus. Les amis intéressés peuvent l’essayer eux-mêmes.

Cet article se termine ici. Pour un contenu plus passionnant, vous pouvez suivre le site Web php chinois tutoriel HTML ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!