Maison > Article > interface Web > Trois façons d'ajouter du barré au texte en HTML et CSS (images et texte)
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 :
Résumé : Il existe trois façons d'ajouter du texte barré, à savoir la baliseCe 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!