Maison > Article > interface Web > Exemples de didacticiels CSS courants en ligne pointillée

Exemples de didacticiels CSS courants en ligne pointillée

零下一度original: 2017-06-16 13:53:422729parcourir

Le didacticiel DIV CSS sur la ligne pointillée comprend des didacticiels CSS qui expliquent les cas de ligne pointillée DIV dans divers styles qui apparaissent souvent.

Cette section présente les lignes pointillées CSS courantes et les didacticiels DIV. Les lignes pointillées CSS, les soulignements et les lignes pointillées de liste sont tous gérés.

1. Ligne pointillée de bordure CSS

Ici, la ligne pointillée est contrôlée par la bordure en pointillés de l'attribut border. La hauteur CSS (hauteur CSS) et la largeur CSS (largeur CSS) définies ci-dessous sont de 350 pixels pour faciliter la visualisation de la démonstration.
1. Bordures en pointillés sur quatre côtés
border:1px dashed #000 ; height :50px;width:350px>
Code HTML : 0fd95622ee3d539259ddb2dd2ba82a65Mes quatre côtés sont des bordures en pointillés noirs16b28748ea4df4d9c2150843fecfba68
L'abréviation de la bordure est définie ici pour définir les quatre côtés bordure du sélecteur divcss5 sous forme de bordure pointillée noire de 1px

2. Ligne pointillée à gauche :

Code CSS : .divcss5-1{border-left:1px dashed #000; height:50px;width:350px }
Code HTML : 8dc7f26bbeb0b2d87fad8d7057caf02bJ'ai une bordure en pointillés noirs à gauche16b28748ea4df4d9c2150843fecfba68Ici, j'ai mis une bordure en pointillés noirs sur le côté gauche

3. Ligne pointillée à droite :

Code CSS : .divcss5-2{border-right:1px dashed #000; >
Code HTML : e1fb1ce5043ca7d6bb8d997f43d867f3Mon côté droit est une bordure en pointillés noirs16b28748ea4df4d9c2150843fecfba68Ici, j'ai défini le côté droit pour qu'il soit une bordure en pointillés noirs

4. Le bord supérieur (bord supérieur) est une ligne pointillée :

Code CSS : .divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
Code HTML : c01375deed980076d35367a1218bebb7i Le bord supérieur est une bordure en pointillés noirs16b28748ea4df4d9c2150843fecfba68Ici, le bord supérieur (bord supérieur) est défini sur une bordure en pointillés noirs

5. Le bord inférieur (bord inférieur) est une ligne pointillée :

Code CSS : .divcss5-4{border-bottom:1px dashed #000; width:350px>
Code HTML : 8de9b8c1fb9699c8b3b7c3e5586585c1Mon bas est une bordure en pointillés noirs16b28748ea4df4d9c2150843fecfba68Le bord inférieur (ligne inférieure) est défini comme une bordure en pointillés noirs sur un côté

6. Si un côté n'est pas une ligne pointillée et que les trois autres côtés sont des lignes pointillées

Ajoutez une bordure droite qui n'est pas pointillée mais sans bord, et l'autre trois côtés sont des bordures en pointillés noirs
Code CSS : .divcss5-5{border:1px dashed #000;border-right:0; height:50px;width :350px}Code HTML : 78c64fb6472e0a89b48fdd7ac5346a01Ma bordure droite n'a pas de bordure et les trois autres côtés sont des exemples de bordures en pointillés noirs16b28748ea4df4d9c2150843fecfba68
Ici, j'ai défini les quatre côtés de l'objet sont des bordures noires en pointillés de 1 px, puis un côté est défini sur 0. Cela équivaut à définir les attributs de bordure en pointillés de 3 côtés, mais faites attention à l'ordre de définition des attributs de bordure ici.

Le code DIV+CSS complet de l'exemple ci-dessus est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>CSS 虚线 DIVCSS5实例说明<title>www.php.cn</title>
<style>
.divcss5{ border:1px dashed #000; height:50px; width:350px}
.divcss5-1{border-left:1px dashed #000; height:50px;width:350px}
.divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
.divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
.divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}
.divcss5-5{border:1px dashed #000; border-right:0;height:50px;width:350px}
/* www.divcss5.com实例 */
</style>
</head>
<body>
www.divcss5.com css虚线实例实例<br>
<div class="divcss5">我四边为虚线边框</div><br>
<div class="divcss5-1">我的左边为黑色虚线边框</div><br>
<div class="divcss5-2">我的右边为黑色虚线边框</div><br>
<div class="divcss5-3">我的上边为黑色虚线边框</div><br>
<div class="divcss5-4">我的下边为黑色虚线边框</div><br>
<div class="divcss5-5">我的右边边框无边线而其它三边为黑色虚线边框实例</div>
</body>
</html>

2. Hyperlien pointé et souligné

Nous définissons souvent. le texte lié Le contenu est soit souligné avec une ligne pointillée avec un lien, soit un soulignement en pointillés apparaît lorsque la souris est déplacée sur le texte avec le lien. Comment y parvenir ? Ici, je vais vous présenter le soulignement en pointillés des hyperliens CSS. .

1. Le texte lié est souligné en pointillés.

Ici, le style CSS du lien hypertexte vers un objet est également contrôlé via la propriété CSS border.

Code CSS de démonstration :

a{ border-bottom:1px dashed #111;}/* Définissez ici le soulignement en pointillés pour qu'il apparaisse sous le texte lié*/

a:hover{ border:0 ;} /* Ici, définissez la ligne pointillée pour qu'elle n'apparaisse pas lorsque la souris passe sur le texte lié*/

Code CSS DIV complet :

Explication : texte- decoration:none; Ceci permet de supprimer le soulignement CSS (l'attribut de soulignement par défaut des hyperliens)

<!DOCTYPE html><html><head><meta charset="gb2312" /><title>CSS 虚线下划线 DIVCSS5实例说明</title><style>a{ border-bottom:1px dashed #111;text-decoration:none;}a:hover{ border:0;}</style></head>
<body>欢迎到<a href="www.php.cn">CSS教程网</a>的www.php.cn- divcss5学习CSS</body></html>

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：Explication détaillée des instances de frontière en CSS3Article suivant：Explication détaillée des instances de frontière en CSS3

Articles Liés

Voir plus