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

yulia
Freigeben: 2018-10-25 15:01:41
Original
19740 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:

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage