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

yulia
リリース: 2018-10-25 15:01:41
オリジナル
19750 人が閲覧しました

毎年恒例のダブル イレブン ショッピング フェスティバルが近づいています。タオバオを閲覧するとき、商品の元の価格にフロントエンドとして取り消し線が追加されていることにお気づきでしょうか。開発者の皆さん、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>
ログイン後にコピー

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

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

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

例: タグはテキストに取り消し線を追加できます。具体的なコードは次のとおりです:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>  
  <p>电视机原价<del>¥4000</del></p>
  <p>电视剧现价¥2999</p>
 </body>
</html>
ログイン後にコピー
図に示すように:

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

概要: 3 つあります。テキストに取り消し線を追加する方法、つまり HTML の タグ、および CSS text-decoration: line-through スタイルです。どちらの方法を選択するかは、個人の習慣や仕事のニーズによって異なりますが、この記事が役に立てば幸いです。

【おすすめの関連チュートリアル】

1.

HTML チュートリアル2.
ブートストラップ チュートリアル

以上がHTMLとCSSのテキスト(画像とテキスト)に取り消し線を追加する3つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート