Maison > interface Web > tutoriel CSS > Comment définir une ligne de démarcation en CSS

Comment définir une ligne de démarcation en CSS

藏色散人
Libérer: 2023-01-06 11:12:53
original
14996 Les gens l'ont consulté

Comment définir la ligne de séparation en CSS : créez d'abord un fichier d'instance HTML ; puis créez trois divs dans le corps et enfin définissez le style du deuxième div sur "padding-top:3px;width:40% ; ; border-top:1px solid #666666;" c'est tout.

Comment définir une ligne de démarcation en CSS

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Utilisez HTML+CSS natif pour créer une ligne de démarcation

Le code est le suivant :

<html>
<title>分割线</title>
<body>
<div>
<span>设备:</span>
<span>1</span>
</div>
<div class="order">
  <span style="white-space:pre">   </span><span class="line"></span>
  <span style="white-space:pre">   </span><span class="txt">这里是一个分割线</span>
  <span style="white-space:pre">   </span><span class="line"></span>
</div>
<div>
<span>设备:</span>
<span>2</span>
</div>
<style type="text/css">
.order {
  height: 20px;
  line-height: 20px;
  text-align: center;
}
.order .line {
  display: inline-block;
  padding-top : 3px;
  width: 40%;
  border-top: 1px solid #666666;
}
.order .txt {
  color: #333333;
  font-size: 12px;
  vertical-align: middle;
}
</style>
</body>
</html>
Copier après la connexion

L'effet est le suivant :

Comment définir une ligne de démarcation en CSS

Partage de vidéos d'apprentissage : tutoriel vidéo CSS

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal