html和CSS為文字新增刪除線的三種方法（圖文）
- yulia原創
- 2018-10-25 15:01:4119726瀏覽
一年一度的雙十一剁手節快到了，大家在逛淘寶時一定會關注商品的價格，你有沒有註意到商品原價上面加了刪除線，作為一個前端開發人員，你知道如何用CSS給文字加刪除線嗎？這篇文章為大家總結了三種新增刪除線的方法，包括HTML中的刪除線標籤和CSS中的刪除線樣式，有一定的參考價值，有興趣的朋友可以看看。
為文字加上刪除線有三種方法，一種是CSS中的text-decoration樣式，一種是標籤，最後一種是標籤。
方法1：用CSS中text-decoration設定刪除線樣式
實例描述：在標籤中設定要刪除的商品價格，給< ;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>效果圖：
#方法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中的text-decoration：line-through樣式。直接用html標籤比較方便，至於選擇哪種方法，還要看個人習慣和工作需要，希望這篇文章對你有幫助！
【相關教學推薦】
1. HTML教學
#2. CSS3教學
3. #bootstrap教程
以上是html和CSS為文字新增刪除線的三種方法（圖文）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn