Heim > Artikel > Web-Frontend > Drei Möglichkeiten, Text in HTML und CSS durchzustreichen (Bilder und Text)

Drei Möglichkeiten, Text in HTML und CSS durchzustreichen (Bilder und Text)

yuliaOriginal: 2018-10-25 15:01:4119658Durchsuche

Das jährliche Double Eleven Hand-Shopping Festival steht vor der Tür. Wenn Sie in Taobao stöbern, werden Sie auf jeden Fall auf den Preis des Produkts achten -End-Entwickler, wissen Sie, wie man CSS zum Durchstreichen von Text verwendet? Dieser Artikel fasst drei Methoden zum Hinzufügen von durchgestrichenen Tags in HTML und durchgestrichenen Stilen in CSS zusammen. Er hat einen gewissen Referenzwert und interessierte Freunde können einen Blick darauf werfen.

Es gibt drei Möglichkeiten, Text durchzustreichen: eine ist der Textdekorationsstil in CSS, die andere ist das -Tag und die letzte ist ~~-Tag.~~

Methode 1: Textdekoration in CSS verwenden, um den durchgestrichenen Stil festzulegen

Beispielbeschreibung: Legen Sie den Preis des zu löschenden Produkts im fest. Tag, geben Sie dem Tag < ;span> einen Klassennamen p, fügen Sie text-decoration: line-through im CSS-Stil hinzu, und Sie können es erreichen. Der spezifische Code lautet wie folgt:

<!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>

Rendering:

Drei Möglichkeiten, Text in HTML und CSS durchzustreichen (Bilder und Text)

Methode 2: Verwenden Sie das ~~-Tag in HTML, um das Tag zu löschen~~

Beispielbeschreibung: Verwenden Sie direkt das ~~;-Tag in HTML, um durchgestrichenen Text hinzuzufügen, der spezifische Code lautet wie folgt:~~

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <s>这个商品原价999</s>
  <p>现价499</p>    
 </body>
</html>

Der Effekt ist wie in der Abbildung gezeigt:

Drei Möglichkeiten, Text in HTML und CSS durchzustreichen (Bilder und Text)

Methode 3: Löschen mit ~~im HTML-Tag~~

Beispielbeschreibung: Das ~~-Tag kann dem Text durchgestrichen werden ist einfach und bequem zu verwenden. Der spezifische Code lautet wie folgt:~~

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>  
  <p>电视机原价<del>¥4000</del></p>
  <p>电视剧现价¥2999</p>
 </body>
</html>

Wirkung Wie im Bild gezeigt:

Drei Möglichkeiten, Text in HTML und CSS durchzustreichen (Bilder und Text)

Zusammenfassung: Es gibt drei Möglichkeiten Fügen Sie dem Text eine Durchstreichung hinzu, nämlich das -Tag, das ~~-Tag und den CSS-Text-Decoration: Line-Through-Stil. Es ist bequemer, HTML-Tags direkt zu verwenden. Die Wahl hängt von Ihren persönlichen Gewohnheiten und Ihren Arbeitsanforderungen ab.~~

【Empfohlene verwandte Tutorials】

1. HTML-Tutorial
2. Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonDrei Möglichkeiten, Text in HTML und CSS durchzustreichen (Bilder und Text). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css bootstrap css3 html

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was ist das Font-Tag in HTML? Wie benutzt man? (Detaillierte Code-Erklärung)Nächster Artikel：Was ist das Font-Tag in HTML? Wie benutzt man? (Detaillierte Code-Erklärung)

In Verbindung stehende Artikel

Mehr sehen