Trois façons d'ajouter du barré au texte en HTML et CSS (images et texte)-tutoriel HTML-php.cn

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

yulia

Libérer： 2018-10-25 15:01:41

original

19740 Les gens l'ont consulté

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>

Copier après la connexion

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>

~~Copier après la connexion~~

~~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>~~
~~Copier après la connexion~~
~~L'effet est comme indiqué sur l'image :~~

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!