Maison > Article > interface Web > Trois façons d'ajouter du barré au texte en HTML et CSS (images et texte)
Trois façons d'ajouter du barré au texte en HTML et CSS (images et texte)
- yuliaoriginal
- 2018-10-25 15:01:4119725parcourir
Le festival de shopping annuel Double Eleven arrive bientôt Lorsque vous parcourez Taobao, vous ferez certainement attention au prix du produit. Avez-vous remarqué que le prix original du produit est barré en façade ? développeur, vous savez comment utiliser CSS pour barrer du texte ? Cet article résume trois méthodes pour ajouter du barré, y compris les balises barrées en HTML et les styles barrés en CSS. Il a une certaine valeur de référence et les amis intéressés peuvent y jeter un œil.
Il existe trois façons d'ajouter du texte barré : l'une est le style de décoration de texte en CSS, l'autre est la balise
Méthode 1 : Utilisez la décoration de texte en CSS pour définir le style barré
Exemple de description : Définissez le prix du produit à supprimer dans la zone tag, donnez à < ;span> un nom de classe p, ajoutez-y un style CSS text-decoration: line-through, et vous pouvez y parvenir. Le code spécifique est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p{text-decoration: line-through;}
</style>
</head>
<body>
<p>深层补水面膜30片原价¥<span class="p">399</span></p>
<p>双十一面膜30片¥299</p>
</body>
</html>Rendu :
Méthode 2 : Utiliser la balise en html pour supprimer la balise
Exemple de description : utiliser directement la balise < ;s> en html pour donner Ajouter un texte barré, le code spécifique est le suivant :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <s>这个商品原价999</s> <p>现价499</p> </body> </html>
L'effet est comme indiqué dans la figure :
Méthode 3 : Utiliser < en html ;del>Supprimer la balise
Exemple de description : La balise est la même que la balise un barré au texte Il est simple et pratique à utiliser. Le code spécifique est le suivant :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>电视机原价<del>¥4000</del></p> <p>电视剧现价¥2999</p> </body> </html>
L'effet est comme indiqué sur l'image :
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!