Introduction détaillée à la méthode de définition de la bordure pointillée en HTML-tutoriel HTML-php.cn

Introduction détaillée à la méthode de définition de la bordure pointillée en HTML

高洛峰

Libérer： 2017-03-03 16:34:56

original

6409 Les gens l'ont consulté

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>

Copier après la connexion

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

Introduction détaillée à la méthode de définition de la bordure pointillée en HTML

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 !