HTMLとCSSのテキスト（画像とテキスト）に取り消し線を追加する3つの方法-htmlチュートリアル-php.cn

HTMLとCSSのテキスト（画像とテキスト）に取り消し線を追加する3つの方法

yulia

リリース： 2018-10-25 15:01:41

オリジナル

19734 人が閲覧しました

毎年恒例のダブルイレブンショッピングフェスティバルが近づいています。タオバオを閲覧するとき、商品の元の価格にフロントエンドとして取り消し線が追加されていることにお気づきでしょうか。開発者の皆さん、CSS を使ってテキストに取り消し線を引く方法をご存知ですか?この記事では、HTML の取り消し線タグと CSS の取り消し線スタイルを含む、取り消し線を追加する 3 つの方法をまとめています。興味がある人は参照してください。

テキストに取り消し線を追加するには 3 つの方法があります。1 つは CSS のテキスト装飾スタイル、もう 1 つはタグです。最後の方法は ~~です。~~

方法 1: CSS のテキスト装飾を使用して取り消し線のスタイルを設定します。

例: 削除する商品の価格をに設定します。 < ;span> タグにクラス名 p を付け、それに CSS スタイルの text-decoration: line-through を追加すると、具体的なコードは次のとおりです:

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

HTMLとCSSのテキスト（画像とテキスト）に取り消し線を追加する3つの方法

方法 2: HTML で ~~タグを使用してタグを削除します~~

~~インスタンスの説明: ~~を直接使用しますHTML の ; タグでテキストを追加します。この行を削除します。具体的なコードは次のとおりです。~~~~

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

~~ログイン後にコピー~~

~~結果は図に示すとおりです。~~

~~# #方法 3: HTML で ~~を使用してタグを削除します。~~~~

例: タグはテキストに取り消し線を追加できます。具体的なコードは次のとおりです:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>电视机原价<del>¥4000</del></p> <p>电视剧现价¥2999</p> </body> </html>
ログイン後にコピー
図に示すように:

概要: 3 つあります。テキストに取り消し線を追加する方法、つまり HTML のタグ、および CSS text-decoration: line-through スタイルです。どちらの方法を選択するかは、個人の習慣や仕事のニーズによって異なりますが、この記事が役に立てば幸いです。
【おすすめの関連チュートリアル】
1.
HTML チュートリアル2.
ブートストラップチュートリアル
以上がHTMLとCSSのテキスト（画像とテキスト）に取り消し線を追加する3つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。