Exemples de didacticiels CSS courants en ligne pointillée-tutoriel CSS-php.cn

Exemples de didacticiels CSS courants en ligne pointillée

零下一度

Libérer： 2017-06-16 13:53:42

original

2795 Les gens l'ont consulté

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 :

Mes quatre côtés sont des bordures en pointillés noirs

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 :

J'ai une bordure en pointillés noirs à gauche

Ici, 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 :

Mon côté droit est une bordure en pointillés noirs

Ici, 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 :

i Le bord supérieur est une bordure en pointillés noirs

Ici, 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 :

Mon bas est une bordure en pointillés noirs

Le 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 :

Ma bordure droite n'a pas de bordure et les trois autres côtés sont des exemples de bordures en pointillés noirs

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>

Copier après la connexion

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>

Copier après la connexion

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!