Étapes de mise en œuvre de la ligne pointillée de la bordure HTML-js tutoriel-php.cn

Étapes de mise en œuvre de la ligne pointillée de la bordure HTML

php中世界最好的语言

Libérer： 2017-12-02 10:21:37

original

5832 Les gens l'ont consulté

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

Copier après la connexion

L'exemple utilise CSSattributmot

border
width
height

Copier après la connexion

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>

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.

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!