您的位置:首页 > div css问集 > 【 返回上一页

DIV CSS文字字体删除线 贯穿线 中穿线怎么添加?

DIV CSS文字删除线怎么添加,如何给文字字体添加删除线贯穿线样式?

对文字添加删除线方法有两种,一种是使用html删除线标签<s>;另外一种是使用css删除线样式text-decoration:line-through


常见删除线效果应用截图

接下来我们分别使用html s删除线标签实现文字删除线效果和使用div css删除线样式text-decoration实现对文字删除线贯穿线样式设置。

一、html标签实现删除线样式

1、使用标签

  1. <s>我被加删除线</s> 

2、实例代码:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>删除线实例 在线演示 www.thinkcss.com</title> 
  6. </head> 
  7. <body> 
  8. 我被加<s>删除线</s>! 
  9. </body> 
  10. </html> 

3、html实例效果截图


使用html标签实现删除线效果截图

二、css删除线样式实现删除线效果

1、使用css实现删除线样式属性单词
text-decoration:line-through

2、div css实现删除线完整html源代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>删除线实例 在线演示 www.thinkcss.com</title> 
  6. <style> 
  7. .thinkcss{ text-decoration:line-through} 
  8. /* css注释说明:设置.thinkcss对象删除线样式 */ 
  9. </style> 
  10. </head> 
  11. <body> 
  12. <p>css样式实现删除线效果如下:</p> 
  13. <p>原价格为:<span class="thinkcss">700</span><br> 
  14. 现价格:500¥</p> 
  15. </body> 
  16. </html> 

3、css删除线-css贯穿线案例截图


Css实现删除线效果截图

以上两个案例ThinkCSS分别使用了html标签方法和使用CSS样式方法实现对文字字体设置删除线(贯穿线)样式效果。平时大家实际CSS DIV布局时候根据需求选择删除线贯穿线实现方法。

扩展相关阅读:
1、css下划线
2、css上划线

HTML标签和CSS实现贯穿线删除线在线演示:查看案例

两个实例打包下载:

相关标签: 贯穿线 删除线
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/wenti/595.shtml

日期:2013-08-07 10:39:47 来源:www.thinkcss.com 作者:ThinkCSS

热门点击