CSS如何做到将价格划掉的效果

【CSS如何做到将价格划掉的效果】新建一个html文件,定名为test.html,用于讲解CSS若何做到将价钱划失落的结果 。

CSS如何做到将价格划掉的效果

文章插图

2在test.html文件内,利用div标签、span标签建立商品价钱的显示,代码如下:


CSS如何做到将价格划掉的效果

文章插图

3在test.html文件内,利用<style type="text/css"></style>标签来标识css代码编写区 。


CSS如何做到将价格划掉的效果

文章插图

4在css标签内,建立div,span标签的样式设置,代码如下:


CSS如何做到将价格划掉的效果

文章插图

5在css标签内,设置div的样式,利用font-size设置字体大小为20px,line-height设置行高为50px 。


CSS如何做到将价格划掉的效果

文章插图

6在css标签内,设置span的样式,利用color设置文字颜色为红色,text-decoration设置删除线的结果 。

CSS如何做到将价格划掉的效果

文章插图

7在浏览器打开test.html页面,可见,实现了将价钱划失落的结果 。

CSS如何做到将价格划掉的效果

文章插图

以上内容就是CSS如何做到将价格划掉的效果的内容啦,希望对你有所帮助哦!

    推荐阅读