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)

yulia
yuliaoriginal
2018-10-25 15:01:4119742parcourir

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 :

Trois façons dajouter du barré au texte en HTML et CSS (images et texte)

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 :

Trois façons dajouter du barré au texte en HTML et CSS (images et texte)

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 :

Trois façons dajouter du barré au texte en HTML et CSS (images et texte)

Résumé : Il existe trois façons d'ajouter du texte barré, à savoir la balise en HTML, la balise et la décoration de texte : le style de passage en ligne en CSS. Il est plus pratique d'utiliser directement les balises html. Quant à la méthode à choisir, cela dépend des habitudes personnelles et des besoins professionnels. J'espère que cet article vous sera utile !

【Tutoriels associés recommandés】

1

Tutoriel HTML2
Tutoriel CSS33.

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