html與CSS給文字添加刪除線的3種方法（圖文）
發(fā)表時(shí)間：2023-08-29 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]一年一度的雙十一剁手節(jié)快到了，大家在逛淘寶時(shí)一定會(huì)關(guān)注商品的價(jià)格，你有沒(méi)有注意到商品原價(jià)上面加了刪除線，作為一個(gè)前端開(kāi)發(fā)人員，你知道如何用CSS給文字加刪除線嗎？這篇文章給大家總結(jié)了添加刪除線的三種方法，包括HTML中的刪除線標(biāo)簽和CSS中的刪除線樣式，有一定的參考價(jià)值，感興趣的朋友可以看看。給文...
一年一度的雙十一剁手節(jié)快到了，大家在逛淘寶時(shí)一定會(huì)關(guān)注商品的價(jià)格，你有沒(méi)有注意到商品原價(jià)上面加了刪除線，作為一個(gè)前端開(kāi)發(fā)人員，你知道如何用CSS給文字加刪除線嗎？這篇文章給大家總結(jié)了添加刪除線的三種方法，包括HTML中的刪除線標(biāo)簽和CSS中的刪除線樣式，有一定的參考價(jià)值，感興趣的朋友可以看看。
給文字添加刪除線有三種方法，一種是CSS中的text-decoration樣式，一種是<s></s>標(biāo)簽，最后一種是<del></del>標(biāo)簽。
方法1：用CSS中text-decoration設(shè)置刪除線樣式
實(shí)例描述：在<span>標(biāo)簽中設(shè)置需要?jiǎng)h除的商品價(jià)格，給<span>標(biāo)簽一個(gè)類名p，給其添加CSS樣式text-decoration: line-through，就可以實(shí)現(xiàn)了，具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p{text-decoration: line-through;}
</style>
</head>
<body>
<p>深層補(bǔ)水面膜30片原價(jià)￥<span class="p">399</span></p>
<p>雙十一面膜30片￥299</p>
</body>
</html>效果圖：
方法2：用html中的<s>刪除標(biāo)簽
實(shí)例描述：直接用html中的<s>標(biāo)簽，即可給文字添加刪除線，具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<s>這個(gè)商品原價(jià)999</s>
<p>現(xiàn)價(jià)499</p>
</body>
</html>
效果如圖所示：
方法3：用html中的<del>刪除標(biāo)簽
實(shí)例描述：<del>標(biāo)簽和<s>標(biāo)簽一樣，都可以給文字添加刪除線，使用簡(jiǎn)單方便，具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>電視機(jī)原價(jià)<del>￥4000</del></p>
<p>電視劇現(xiàn)價(jià)￥2999</p>
</body>
</html>
效果如圖所示：
總結(jié)：給文字添加刪除線有三種方法，分別是html中的<del>標(biāo)簽、<s>標(biāo)簽以及CSS中的text-decoration：line-through樣式。直接用html標(biāo)簽比較方便，至于選擇哪種方法，還要看個(gè)人習(xí)慣和工作需要，希望這篇文章對(duì)你有所幫助！
【相關(guān)教程推薦】
1. HTML教程
2. CSS3教程
3. bootstrap教程
以上就是html和CSS給文字添加刪除線的三種方法（圖文）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
