Drei Möglichkeiten, Text in HTML und CSS durchzustreichen (Bilder und Text)-HTML-Tutorial-php.cn

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

yulia

Freigeben： 2018-10-25 15:01:41

Original

19785 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

~~Nach dem Login kopieren~~

~~Der Effekt ist wie in der Abbildung gezeigt:~~

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

~~Nach dem Login kopieren~~

~~Wirkung Wie im Bild gezeigt:~~

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!