recherche

Maison >interface Web >js tutoriel >É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中世界最好的语言
php中世界最好的语言original
2017-12-02 10:21:375830parcourir

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!

Déclaration：
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
Article précédent：Introduction détaillée au stockage de stockage Web localArticle suivant：Introduction détaillée au stockage de stockage Web local

Articles Liés

Voir plus