Comment définir une ligne de démarcation horizontale dans le front-end Web

Dans le développement Web, la définition de lignes de séparation horizontales est une exigence courante, ce qui peut rendre le contenu de la page plus clair. Dans le développement front-end, nous pouvons utiliser CSS pour définir la ligne de démarcation horizontale et ajuster son style et sa position si nécessaire.

1. Utilisez CSS pour définir la ligne de séparation horizontale

En CSS, vous pouvez utiliser l'attribut border pour définir la ligne de séparation horizontale. La méthode d'implémentation spécifique est la suivante :

hr {
  border: none; 
  border-top: 1px solid black; /*设置上边框的样式，颜色可以根据需要自行更改*/
  margin: 0px; /*设置边距，避免产生额外的间隔*/
}

Utilisez cet extrait de code pour créer une ligne de séparation horizontale de style par défaut dans un document HTML. Vous pouvez ajuster le style de la ligne de séparation horizontale en modifiant le style de la bordure supérieure en CSS.

Si vous devez définir la longueur de la ligne de séparation, vous pouvez utiliser l'attribut width, comme suit :

hr {
  width: 50%; /*分割线宽度，根据需要自行调整*/
  height: 2px; /*分割线高度，根据需要自行调整*/
  background-color: black; /*分割线颜色，根据需要自行调整*/
  border: none; 
  margin: 0px; 
}

2. Définissez la position de la ligne de séparation horizontale

En plus de définir le style de la ligne de séparation horizontale , vous devez également considérer sa position. Si vous devez placer une ligne de séparation horizontale entre le texte, vous pouvez ajouter une ligne de séparation horizontale avant le texte qui doit être divisé. Si vous devez placer la ligne de séparation horizontale au milieu de la page, vous devez la placer au milieu du conteneur correspondant.

Définissez une ligne de séparation horizontale entre le texte, vous pouvez insérer la balise hr en HTML, comme suit :

<p>段落文本。</p>
<hr>
<p>其他段落文本。</p>

Définissez une ligne de séparation horizontale dans le conteneur, vous pouvez ajouter la balise hr dans le conteneur correspondant et définir le style de le conteneur. Comme suit :

<div class="container">
  <p>此处是容器的内容。</p>
  <hr>
</div>

.container {
  text-align: center; /*设置内容居中*/
}

3. Conclusion

Ce qui précède est la méthode de base d'utilisation de CSS pour définir des lignes de séparation horizontales dans le front-end Web. En plus des méthodes présentées ci-dessus, vous pouvez également définir la ligne de démarcation en utilisant des pseudo-éléments, des images d'arrière-plan, etc. Venez l'essayer !

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!