ホームページ > 記事 > ウェブフロントエンド > CSSで取り消し線のスタイルを設定するにはどうすればよいですか? (詳しいコード説明)
CSSで取り消し線のスタイルを設定するにはどうすればよいですか? (詳しいコード説明)
- 藏色散人オリジナル
- 2018-10-08 15:07:5120621ブラウズ
この記事ではcss取り消し線の設定と実装方法を中心に紹介します。
大手ショッピングモールのホームページを閲覧すると、商品の元の価格がいくらで、現在の価格がいくらに変更されるかなど、商品のプロモーションに効果があることがわかると思います。ユーザーがより直感的なギャップを見つけるために、通常は元の価格に目立つ取り消し線が追加されます。
もちろん、モールのWebサイトや弊社の通常のWebサイト、フォーラムサイトなどでもこのエフェクトを表示するだけでなく、Webサイトのコンテンツをより美しく、簡潔に表示するために、CSSを使用して取り消し線効果を実現することもできます。 ！
では、CSS を使用して取り消し線スタイルを実現するにはどうすればよいでしょうか?
以下では、css 取り消し線 の実装方法を簡単なコード例を通して詳しく説明します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css删除线</title>
<style>
.demo{
text-decoration:line-through;
color: red;
}
span{color:black;}
</style>
</head>
<body>
<div>
<p><span class="demo"><span>这里有一个删除线</span></span></p>
</div>
</body>
</html>ブラウザからアクセスすると、css取り消し線で以下のような効果が得られます。
cssの##が主に使用されます。 #text-decoration:line-throughStyle 属性。
text-decoration: line-through; と スタイルを組み合わせて、取り消し線とスタイル効果を実現するテキストのフォントの色を定義します。文字の色が違う！
同様に、元の価格と現在の価格の関連効果も簡単に実現できます:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css删除线</title>
<style>
.demo{
text-decoration:line-through;
color: red;
}
span{color:black;}
</style>
</head>
<body>
<div>
<p>原价：<span class="demo"><span>500元</span></span><br>
现价：150元
</p>
</div>
</body>
</html>以下に示すように:
css の取り消し線と取り消し線カラーコントロールの設定 の具体的な実装方法についてです！とてもシンプルで分かりやすいので、困っている友達のお役に立てれば幸いです！
以上がCSSで取り消し線のスタイルを設定するにはどうすればよいですか? (詳しいコード説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。