怎么用css設置刪除線樣式

這篇文章主要介紹了怎么用css設置刪除線樣式，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

專注于為中小企業提供成都網站設計、網站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業岢嵐免費做網站提供優質的服務。我們立足成都，凝聚了一批互聯網行業人才，有力地推動了1000多家企業的穩健成長，幫助中小企業通過網站建設實現規模擴充和轉變。

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<title>css刪除線</title>

<style>

.demo{

text-decoration:line-through;

color:red;

}

span{color:black;}

</style>

</head>

<body>

<div>

<p><spanclass="demo"><span>這里有一個刪除線</span></span></p>

</div>

</body>

</html>

通過瀏覽器訪問，css刪除線實現效果如下圖：

009b6b898c6a53b94e6b75d5abb1066.png

這里主要用到css中的text-decoration：line-through樣式屬性。

首先大家應該都知道text-decoration屬性是規定添加到文本的修飾。

而值為line-through則表示定義穿過文本下的一條線。

在上述代碼中我們結合了text-decoration：line-through；和<span></span>樣式定義文本字體顏色的樣式，來實現刪除線與文字顏色不一的樣式效果！

同理我們也可以輕松的實現原價現價的相關效果：

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<title>css刪除線</title>

<style>

.demo{

text-decoration:line-through;

color:red;

}

span{color:black;}

</style>

</head>

<body>

<div>

現價：150元

</p>

</div>

</body>

</html>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“怎么用css設置刪除線樣式”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!

本文標題：怎么用css設置刪除線樣式
轉載源于：http://m.2m8n56k.cn/article22/jojgcc.html

成都網站建設公司_創新互聯，為您提供搜索引擎優化、自適應網站、云服務器、商城網站、小程序開發、網站收錄

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

中文字幕第五页-中文字幕第页-中文字幕韩国-中文字幕最新-国产尤物二区三区在线观看-国产尤物福利视频一区二区

怎么用css設置刪除線樣式