Maison > Article > interface Web > Étapes de mise en œuvre de la ligne pointillée de la bordure HTML
Étapes de mise en œuvre de la ligne pointillée de la bordure HTML
- php中世界最好的语言original
- 2017-12-02 10:21:375718parcourir
En HTML, vous pouvez ajouter des bordures ou des bordures en pointillés à la plupart des balises. Cette fois, nous ajouterons donc un style d'effet de bordure en pointillé à plusieurs balises différentes. Nous pouvons saisir et appliquer de manière flexible le concept de bordures en pointillés en fonction des cas suivants.
balises communes HTML
div标签 span ul li table tr td
L'exemple utilise CSSattributmot
border width height
Points clés du CSS pour réaliser la ligne pointillée
border est l'attribut border. Si vous souhaitez obtenir l'effet de bordure d'objet, vous devez définir la largeur, la couleur et le style de bordure (ligne continue ou pointillée)
border:1px dashed #. F00 Il s'agit de définir la largeur du style de bordure sur 1px. Ligne pointillée, la ligne pointillée est rouge.
Exemple de description
Nous définissons la même largeur, la même hauteur et l'effet de bordure pour les étiquettes ci-dessus.
Code HTML complet :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html边框虚线演示</title>
<style>
.bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px}
span{display:block}/*css注释说明：让span形成块*/
</style>
</head>
<body>
<div class="bor">div盒子</div>
<span class="bor">span盒子</span>
<ul class="bor">
<li>ul li列表</li>
<li>ul li列表</li>
</ul>
<table class="bor">
<tr>
<td>表格</td>
<td>表格2</td>
</tr>
<tr>
<td>数据</td>
<td>数据2</td>
</tr>
</table>
</body>
</html>L'exemple ci-dessus définit le même style pour différentes balises en HTML, y compris la même ligne pointillée de bordure.
Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Étapes pour implémenter l'effet de création de commutateurs dynamiques avec Css3
Comment implémenter la ligne pointillée style de CSS
Étapes pour optimiser les formulaires HTML5 avec CSS3
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!