您好,登錄后才能下訂單哦!
這篇文章主要介紹用css設(shè)置刪除線樣式的方法,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
相信大家在瀏覽各大商城網(wǎng)站時(shí),都會(huì)看到一些關(guān)于產(chǎn)品促銷的效果,比如某個(gè)產(chǎn)品的原價(jià)標(biāo)記為多少,現(xiàn)價(jià)又改成了多少,并且為了用戶發(fā)現(xiàn)更直觀的差距,通常會(huì)在原價(jià)上添加一個(gè)明顯的刪除線!
當(dāng)然除了商城網(wǎng)站上會(huì)出現(xiàn)這樣的效果,在我們普通網(wǎng)站或者論壇站上,為了更美觀更簡潔得展現(xiàn)網(wǎng)站內(nèi)容,也會(huì)使用css實(shí)現(xiàn)刪除線效果!
那么如何使用css實(shí)現(xiàn)刪除線樣式呢?
下面我們通過簡單的代碼示例,為大家詳細(xì)解說關(guān)于css刪除線的實(shí)現(xiàn)方法!
<!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>這里有一個(gè)刪除線</span></span></p> </div> </body> </html>
通過瀏覽器訪問,css刪除線實(shí)現(xiàn)效果如下圖:
這里主要用到css中的text-decoration:line-through樣式屬性。
首先大家應(yīng)該都知道text-decoration 屬性是規(guī)定添加到文本的修飾。
而值為line-through則表示定義穿過文本下的一條線。
在上述代碼中我們結(jié)合了text-decoration:line-through;和<span></span>樣式定義文本字體顏色的樣式,來實(shí)現(xiàn)刪除線與文字顏色不一的樣式效果!
同理我們也可以輕松的實(shí)現(xiàn)原價(jià)現(xiàn)價(jià)的相關(guān)效果:
<!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>原價(jià):<span class="demo"><span>500元</span></span><br> 現(xiàn)價(jià):150元 </p> </div> </body> </html>
如下圖:
以上是用css設(shè)置刪除線樣式的方法的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。