在網頁設計中,價格的劃線效果常常用于標示商品原價和促銷價格的差異。利用CSS樣式可以很方便地實現這一效果。
/* 給價格劃線 */ .strikethrough { text-decoration: line-through; }
以上樣式代碼中,我們通過設置文本的text-decoration屬性值為line-through,就可以讓文本中的所有字符都被添加上一條中線。接下來,在需要劃線的價格所對應的HTML元素上,添加.strikethrough類名,即可實現價格劃線的效果。
<!-- HTML --> <p>原價:<span class="strikethrough">¥189</span></p> <p>現價:<span>¥169</span></p>
以上HTML代碼中,我們將原價價格用標簽包含,并添加上.strikethrough類名,實現自動劃線。
需要注意的是,使用text-decoration屬性時,IE瀏覽器可能會出現抗鋸齒效果不理想、色差等問題。為了獲得更好的效果,可以嘗試使用外部字體文件或者其他代替方案。
上一篇css怎么添加父節點
下一篇css怎么清除鏈接字體