ホームページ > 記事 > ウェブフロントエンド > HTMLとCSSのテキスト（画像とテキスト）に取り消し線を追加する3つの方法
HTMLとCSSのテキスト（画像とテキスト）に取り消し線を追加する3つの方法
- yuliaオリジナル
- 2018-10-25 15:01:4119657ブラウズ
毎年恒例のダブル イレブン ショッピング フェスティバルが近づいています。タオバオを閲覧するとき、商品の元の価格にフロントエンドとして取り消し線が追加されていることにお気づきでしょうか。開発者の皆さん、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:
方法 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>図に示すように:
以上がHTMLとCSSのテキスト（画像とテキスト）に取り消し線を追加する3つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。