css 划去金额的线的标签
导读:在网页设计中,我们经常需要标示一些已经付款或者是已经下架的物品,一般会通过在金额前加上删除线的方式来表示这种状态。那么如何通过CSS来实现这个删除线呢?其实非常简单,我们只需要在对应的HTML标签上添加text-decoration: li...
在网页设计中,我们经常需要标示一些已经付款或者是已经下架的物品,一般会通过在金额前加上删除线的方式来表示这种状态。那么如何通过CSS来实现这个删除线呢?其实非常简单,我们只需要在对应的HTML标签上添加text-decoration: line-through; 的CSS样式即可。
例如: p style="text-decoration:line-through;
">
$50/p>
这样在网页上就会显示出这个金额,并且有删除线。同样的道理,我们也可以把这个样式定义在CSS样式表中,以便全局使用:
例如:head>
style>
.deleted {
text-decoration: line-through;
}
/style>
/head>
body>
p class="deleted">
$50/p>
p class="deleted">
$100/p>
p>
$200/p>
/body>
通过在HTML标签上添加class="deleted"的方式,就能够实现对应的删除线效果。这种方式不仅可以应用在文字上,也可以应用在价格等数字上。
除了删除线之外,还可以通过其他的text-decoration属性来实现不同的装饰效果,如下划线、波浪线等等。这些属性的使用方式和text-decoration:line-through; 类似,可以参考相关文档。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: css 划去金额的线的标签
本文地址: https://pptw.com/jishu/532729.html
