首頁  >  文章  >  web前端  >  html和CSS為文字新增刪除線的三種方法(圖文)

html和CSS為文字新增刪除線的三種方法(圖文)

yulia
yulia原創
2018-10-25 15:01:4119718瀏覽

一年一度的雙十一剁手節快到了,大家在逛淘寶時一定會關注商品的價格,你有沒有註意到商品原價上面加了刪除線,作為一個前端開發人員,你知道如何用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>

效果圖:

html和CSS為文字新增刪除線的三種方法(圖文)

#方法2:用html中的刪除標籤

#實例描述:直接用html中的標籤,即可為文字新增刪除線,具體程式碼如下:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <s>这个商品原价999</s>
  <p>现价499</p>    
 </body>
</html>

效果如圖所示:

html和CSS為文字新增刪除線的三種方法(圖文)

#方法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為文字新增刪除線的三種方法(圖文)

總結:為文字新增刪除線有三種方法,分別是html中的標籤、標籤以及CSS中的text-decoration:line-through樣式。直接用html標籤比較方便,至於選擇哪種方法,還要看個人習慣和工作需要,希望這篇文章對你有幫助!

【相關教學推薦】

1. HTML教學
#2. CSS3教學
3. #bootstrap教程

以上是html和CSS為文字新增刪除線的三種方法(圖文)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn