Maison > Article > interface Web > Introduction détaillée à la méthode de définition de la bordure pointillée en HTML
Introduction détaillée à la méthode de définition de la bordure pointillée en HTML
- 高洛峰original
- 2017-03-03 16:34:566407parcourir
Utilisation de styles CSS et d'éléments de balises HTML Afin d'ajouter des bordures en pointillés à différentes balises HTML, nous sélectionnons plusieurs balises communes à aligner et définissons l'effet de bordure en pointillé.
1. Balises HTML courantes balise p portée Ulli table tr td
2. L'exemple utilise des mots d'attribut CSS. frontière largeur height
3. Introduction clé au CSS pour réaliser des lignes pointillées border est l'attribut border. Si vous souhaitez implémenter
, utilisez des styles CSS et des éléments de balise HTML
Afin d'ajouter des bordures en pointillés à différentes balises html, nous sélectionnons plusieurs balises communes à aligner et définir l'effet de bordure en pointillé.
1. Balises HTML communes
balise p
span
ul li
table tr td
2. L'exemple utilise les mots d'attribut CSS
bordure
largeur
hauteur
3. , points clés CSS pour réaliser des lignes pointillées
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 (solide ou ligne pointillée)
border:1px dashed #F00 Ceci permet de définir la largeur du style de bordure sur 1px, ligne pointillée, et la ligne pointillée est rouge.
4. Exemple de description
Nous définissons la même largeur, la même hauteur et le même effet de bordure pour les étiquettes ci-dessus.
5. Code HTML complet :
<!DOCTYPE html> <html>
<head> <meta charset="utf-8" />
<title>html边框虚线演示 www.pcss5.com</title> <style>
.bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px} span{display:block}/*css注释说明：让span形成块*/
</style> </head>
<body> <p class="bor">p盒子</p>
<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.
6. Captures d'écran de l'effet du navigateur
captures d'écran HTML de différents paramètres d'étiquette, effet de ligne pointillée
Plus de HTML Pour une introduction détaillée à la méthode de définition d'une bordure en pointillé, veuillez faire attention au site Web PHP chinois pour les articles connexes !