text-decoration <del> <s> 实现横线从文字中间穿过的CSS效果属性和html标签

最新推荐文章于 2024-09-27 22:26:16 发布

kungfu_panda

最新推荐文章于 2024-09-27 22:26:16 发布

阅读量2.7w

点赞数

分类专栏：前端开发

前端开发专栏收录该内容

118 篇文章 1 订阅

订阅专栏

如何在html页面中实现横线从文字中间穿过的效果呢？

要实现这种效果有三种方法可实现，如下：

1、是用CSS样式表中 text-decoration:line-through; 属性

2、是使用<del>186.00</del>html标签

3、是使用<s>186.00</s>html标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MJ.588cy.com</title>
<style type="text/css">
b{ text-decoration: line-through; font-weight:100;}
</style>
</head>

<body>
<b>186.00</b>
<del>186.00</del>
<s>186.00</s>
</body>
</html>