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

最新推荐文章于 2023-09-27 10:55:54 发布
最新推荐文章于 2023-09-27 10:55:54 发布
阅读量2.7w 收藏
点赞数
分类专栏： 前端开发

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

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

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

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

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

kungfu_panda
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
tailwind-text-decoration-color
05-30
顺风文字装饰颜色 该插件使用text-decoration-color: <color>;为锚链接文本装饰着色插入符生成类text-decoration-color: <color>; . <color>部分来自你的顺风配置颜色——所以你可以使用decoration-gray-500或自定义颜色decoration-sop-900 。 安装 通过npm或纱将其拉入： npm install tailwind-text-decoration-color # OR. yarn add tailwind-text-decoration-color 用法 将其添加到 Tailwind 配置的 plugins 数组中。 plugins : [ // Other plugins require ( 'tailwind-text-decoration-color' ) , ] , 对于
CSS中text-decoration 常用属性.txt
01-29
css下划线
uni-app：canvas绘制图形3
最新发布
weixin_46001736的博客
09-27 979
uni-app：canvas绘制图形3
CSS划过文本的线，text-decoration属性
swx999的博客
08-06 1181
一：text-decoretion：overline 定义文本上的一条线。 二：text-decoretion：line-through 定义穿过文本下的一条线。 三：text-decoretion：underline 定义文本下的一条线。 四：text-decoretion：blink 定义闪烁的文本。 五：text-decoretion：none 默认。定义标准的文本。可以去掉a标签下的线，如图： 六：text-decoretion：inherit 规定应该从父元素继承 text-decora
中间文字，两边横线的简单实现
weixin_43152938的博客
03-21 781
在做一个小demo的时候，有一个需求是中间文字，两边横线的分割线，这种是比较常见的一种分割线，下面的做法是一个个人觉得比较简单的实现方式，横线的长度也可以根据视窗的大小进行缩放。 <div class="line-box"> <span class="line"></span> <span class="text">我是一条分割线</spa...
CSS-文本
Vincent
06-03 398
文本修饰 text-decoration: (line-through | underline | overline | none | inherit) line-through - 横穿文本 underline - 下划线 overline - 上划线 none - 无 inherit - 继承自父元素 使用服务器端字体 @font-face{      font-fa
横线从文字中间穿过的CSS效果属性和html标签
u011374091的博客
09-25 4243
要实现在html页面中实现横线从文字中间穿过的效果有三种方法可实现，如下： 1、是用CSS样式表中 text-decoration:line-through; 属性 2、是使用&lt;del&gt;186.00&lt;/del&gt;html标签 3、是使用&lt;s&gt;186.00&lt;/s&gt;html标签   &lt;!DOCTYPE html PUBLIC "-//W3...
uniapp--图片与文字中心线在同一水平线上
AnastasiaZyq的博客
06-07 3988
uniapp开发中遇到图片与文字在开发者工具上效果显示中心线是在同一水平线上，但真机调试时，文字在垂直方向上位置上移。 在ri'chang'kai'fa
uni-app学习：CSS之文本样式
weixin_45932157的博客
11-15 2206
1、字体大小 font-size:12px; 2、文字加线 1）下划线：text-decoration:underline 2）删除线：text-decoration:line-through 3）上划线：text-decoration:overline 3、字体加粗 font-weight:bold; 4、字体倾斜 font-style: italic; 5、内容居中 1）靠左对齐： text-align:left 2）靠右对齐：text-align:right 3）居中对齐：text-align:ce.
HTML常用标签
叶子与海的博客
09-14 2077
1.文本标签 标题标签 h1~h6逐渐变小 段落标签 段落标签会自动换行，并且段落与段落之间有一定的间距。 换行标签 自闭合标签，br是break（换行）的缩写。 文本标签 平时用更有语义性的标签(加粗的）
CSS中的下划线text-decoration属性使用进阶
12-13
定义和用法text-decoration 属性规定添加到文本的修饰。注释：修饰的颜色由 "color" 属性设置。说明这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到...
text-decoration 、border-radius与其他属性的区别
01-18
text-decoration和border-radius属性出现了两次系统无法获取命令识别执行代码而对于其他属性系统者可以继承你的新指令，前一指令不受影向
CSS-text-decoration-and-text-transform:再次仅使用css文件，而不使用html。 在正文中尝试了text-decoration和text-transform关键字。 这些关键字有很多功能，但是对于修饰，我选择了下划线，对于转换，我选择了小写字母。 这些关键字还有很多可以做的，因此可以尝试一下
04-12
CSS文本装饰和文本转换 ... 在正文中尝试了text-decoration和text-transform关键字。 这些关键字有很多功能，但是对于修饰，我选择了下划线，对于转换，我选择了小写字母。 这些关键字还有很多可以做的尝试。
HTML文本属性颜色控制属性的实现
11-21
一、文本装饰的属性 1.格式：text-decoration:underline; 2.取值： （1）underline代表下划线 （2）line-through代表删除线 （3）overline代表上划线 （4）none代表什么格式都没有（默认是这个属性） 注意：none的...
css对于颜色和文本属性的控制
12-10
本教程主要介绍css的基础知识,将逐个讲解css的各个属性,过程可能比较枯燥,但会尽力多举例说明. css语法 例:用Web Developer的css查看功能查看Jorux.com首页的css文件,可以看到以下代码: body {font: normal 12px/...
gatsby-remark-text-decoration:将装饰标签添加到Gatsby markdown中，即可轻松装饰文本
05-24
plugins: [ { resolve : 'gatsby-transformer-remark' , options : { plugins : [ { resolve : 'gatsby-remark-text-decoration' , options : { } } ] } }]使用下划线和标记装饰的示例影响格式例子输出颜色{c-color...
css+js实现select列表横向排列效果代码
01-19
请选择ABCDEFGHI_select横排效果_软件开发网 *{font-size:12px;} A.s_l { BORDER: #dddddd 1px solid;BORDER-right: #dddddd 0px solid; BACKGROUND: #ffffff;PADDING: 4px 6px 2px 6px; TEXT-DECORATION: none;...
CSS定义超链接四个状态的正确顺序L-V-H-A
12-13
css定义超链接是要有先后顺序的。否则，在某些浏览器里面有可能会出现某个样式不起作用的bug。不能正确显示想要的效果。 CSS属性的排列顺序: L-V-H-A 。 L-V-H-A是link、visited、hover、...text-decoration:none ;
修改以下代码实现四列在同一排上<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>底部设计</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> footer { background-color: #f5f5f5; padding: 50px 0;} footer h4 { font-size: 18px; font-weight: bold;} footer p { font-size: 14px; line-height: 1.5;} footer ul { list-style: none; padding: 0; margin: 0;} footer ul li { margin-bottom: 10px;} footer ul li a { color: #333; font-size: 14px; line-height: 1.5; text-decoration: none;} footer ul li a:hover { text-decoration: underline;} </style> </head> <body> <footer> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <h4>关于我们</h4> <p>我们是一家专业的电商公司，致力于为客户提供高品质的商品和服务。</p> </div> <div class="col-md-3 col-sm-6"> <h4>联系我们</h4> <p>电话：123-456-7890</p> <p>邮箱：[email protected]</p> </div> <div class="col-md-3 col-sm-6"> <h4>购物指南</h4> <ul> <li><a href="#">购物流程</a></li> <li><a href="#">注册登录</a></li> <li><a href="#">会员中心</a></li> <li><a href="#">支付方式</a></li> </ul> </div> <div class="col-md-3 col-sm-6"> <h4>合作伙伴</h4> <ul> <li><a href="#">京东</a></li> <li><a href="#">淘宝</a></li> <li><a href="#">天猫</a></li> <li><a href="#">苏宁</a></li> </ul> </div> </div> </div> </footer> </body> </html>变成一行四列
06-08
可以将每个col-md-3和col-sm-6改为col-md-3 col-sm-3，这样每个列的宽度就会变成四分之一，实现四列在同一行上。修改后的代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值