横线从文字中间穿过的CSS效果属性和html标签

最新推荐文章于 2022-05-18 14:37:37 发布

ykyfendou

最新推荐文章于 2022-05-18 14:37:37 发布

阅读量4.4k

点赞数

分类专栏：学习笔记 html 文章标签：文字中间穿过横线 CSS效果 html 标签

本文链接：https://blog.csdn.net/u011374091/article/details/84656926

版权

html 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

学习笔记

12 篇文章 0 订阅

订阅专栏

要实现在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">

<head>

b {

text-decoration: line-through;

font-weight: 100;

}

</style>

</head>

<body>

</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ykyfendou

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

HTML 类别选择器下划线,css text-decoration下划线删除线上划线属性样式

weixin_32392989的博客

06-03

1173

一、DIV+CSS下划线基础DIV CSS text-decoration下划线、删除线、上划线属性，本节介绍使用div+css样式实现文字字体下划线、字体删除线贯穿线、上划线样式。1、CSS控制下划线出现用到地方 - TOP在DIV CSS网页中常常使用CSS代码来人对象文字内容加上下划线。使用CSS属性单词：text-decoration -CSS 手册了解：http://www.divc...

CSS划过文本的线，text-decoration属性

swx999的博客

08-06

1298

一：text-decoretion：overline 定义文本上的一条线。二：text-decoretion：line-through 定义穿过文本下的一条线。三：text-decoretion：underline 定义文本下的一条线。四：text-decoretion：blink 定义闪烁的文本。五：text-decoretion：none 默认。定义标准的文本。可以去掉a标签下的线，如图：六：text-decoretion：inherit 规定应该从父元素继承 text-decora

参与评论您还未登录，请先登录后发表或查看评论

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

kungfu_panda的专栏

09-26

2万+

如何在html页面中实现横线从文字中间穿过的效果呢？要实现这种效果有三种方法可实现，如下： 1、是用CSS样式表中 text-decoration:line-through; 属性 2、是使用186.00html标签 3、是使用186.00html标签 MJ.588cy.com b{ text-decoration: line-through; font-we

HTML怎么像是下划线、穿越文字的横线以及上划线

王继超的专栏

10-17

2万+

这些下划线，上划线等样式都属于HTML物理字体(Physical Style) 今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！(上标样式：如某个数的次方) 今天天气真好！今天天气真好！(下标样式：如某个化学表达式H20)

通过标签内文本的值找到其标签

qq_42750608的博客

09-11

315

一般是通过for遍历,具体就不说了,今天说说另外的方法: var xpath = `//p[text()='\{${el.getAttribute("data")}\}']`;var matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; console.log(matchingElement) 你们将上面的\{${.

html+css+js基础问答

qq_43751465的博客

08-26

5235

css3 1.标签语义化顾名思义，合理的标签干合适的事情块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、行内块（display：inline-block）：img、input 区别： 1.

第37天学习——CSS

aixuexide3236的博客

11-15

405

一 CSS初识 1 CSS的发展历程从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。 2 CSS 网页的美容师 CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。让我们的网页更加丰富多彩。 CSS的最大贡献就是：

【学习笔记】CSS基础

weixin_44802075的博客

08-26

158

一、CSS构造块「1. HTML的局限性」 HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。操作html属性不方便 HTML里面添加样式带来的是无尽的臃肿和繁琐「2. CSS网页的美容师」让我们的网页更加丰富多彩，布局更加灵活自如。 CSS最大的贡献：让HTML从样式中脱离，实现了HTML专注去做结构呈现，样式交给CSS 「3. CSS」CSS(Cascading Style Sheet

前端学习（二）CSS基础1

whitefish520的博客

07-22

9175

什么是CSS CSS的引入：由于HTML只关注内容的语义，导致单纯用HTML做出的网页很丑在HTML中设置样式非常不方便，也非常繁琐使用CSS能让网页更加美观 CSS让HTML从样式中脱离，HTML专门做结构，CSS专门做样式 CSS的定义：层叠样式表（Cascading Style Sheets），用来做网页的样式，CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景控制以及整体排版等，而且还可以针对不同的浏览器设置不同的样式 CSS的作用：主要用于设置HTML页面中的文本内容（字体、大

CSS-文本

Vincent

06-03

436

文本修饰 text-decoration: (line-through | underline | overline | none | inherit) line-through - 横穿文本 underline - 下划线 overline - 上划线 none - 无 inherit - 继承自父元素使用服务器端字体 @font-face{ font-fa

div模块边框中间添加文字（边框线在文字两边横穿文字）

ʚ菲菲的博客ɞ

02-05

4170

div模块边框中间添加文字（边框线在文字两边横穿文字）需求图如下：其他三个边框可通过设置border完成，包含文字的一边可以分布实现：左边线 + 文字 + 右边线 html： <div class="pop"> <div class="pop_title"> <span class="line_left"></span> <span class="title">控制器主网络配置</s.

css：text-decoration给文字增加上划线、删除线、下划线

彭世瑜的博客

08-12

4万+

CSS 语法 text-decoration: <text-decoration-line text-decoration-style text-decoration-color> text-decoration-line 值描述 none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 blink 定义闪烁的文本。 inherit 规定应该从父元

HTML中横线的运用方法

m0_67846661的博客

05-18

7879

一、作系列横单线　　在这个例子中，用到了表格主标题标记<caption>，它的语法如下： <caption align=left|center|right valign=top|bottom> 　　align和valign分别用于设定标题的水平位置和垂直位置。align的默认值是center；valign的默认值是top。利用<caption>标记可以方便地在紧靠边表格的顶部或底部写上文字，且居中，若用其它办法要麻烦得多。另外在本例中能使表格产生单线效果是设置了<

HTML中用CSS样式实现文字两边添加水平线

Siona_xin 的博客

11-28

1万+

（1）html中的代码：<div class="content"> <p class="title">新特卖每日早10晚8上新</p> </div>（2）css样式中的代码：.content{ width: 960px; margin: 100px auto; border-top: 1px solid black; position: relative; }

CSS伪类before，after制作左右横线中间文字效果

热门推荐

baidu_33163851的博客

05-03

4万+

html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> .container{ width: 1000px; margin: 10px auto; border: 1px solid red;

css划隔横线的两种方法

weixin_30457881的博客

11-28

525

css划隔横线的两种方法方法一：用DIV，代码如下：（推荐此方法） <div style="width:800px;height:1px;margin:0px auto;padding:0px;overflow:hidden;"></div> 说明：上面代码中的红色部分overflow:hidden;很重要，如果不加这句的话，在IE6下高度将会被拉的很开。...

swiper-wrapper轮滑组件（多组轮滑界面）无效问题解决

SHALLNY

08-24

9314

1. 我觉得最难的就是改插件啦，看得懂还好，看不懂只能硬啃了，不过过程还是蛮享受的，毕竟对前端弱鸡来说是get了一个技能点。 2.首先swiper轮滑组件是有很多详细的官网api的，其实有些细节问题一旦爆发出来也是在api里一顿苦找。那么言归正传，多组轮滑swiper同时出现时，会有一个初始化问题，当你声明的swiper对象仅为一个时，那么多组轮滑样式就开始各种报错啦譬如：左右

html中横线使用

美妙_perfect

09-21

4万+

第一种： <hr style=" height:2px;border:none;border-top:2px dotted #185598;" /> 园点虚线 height:2px;是hr的高度 border:none;是没有边框 border-top:2px dotted #185598;是设置横线的样式 dotted 虚线 #185598 颜色第二种： <hr...

CSS实现鼠标经过，文字下方横线划过特效

weixin_39728230的博客

05-27

1万+

昨天在聊天群里看见有人问，鼠标划过，文字下方横线从左向右划过怎么实现？作为初学前端的我页忍不住想要试一试自己能否实现这样的效果，当然用JS实现确实简单，另外自己最近刚巩固了css3的一些新的过渡和动画特性的编程，所以再巩固一下也好，遂决定用CSS3的一些特性来写这个特效。一开始为了最简单，我直接就是做好一个导航，ul > li > a。然后li左浮动布局。如下...

HTML标签属性详解：从跑马灯到字体效果

`<u>`、`<ins>`和`<strike>`、`<s>`、`<del>`则分别用于下划线、插入文本、横线和删除线效果。`<kbd>`用于表示键盘输入的文本，`<tt>`则呈现打字机风格的字体。`<xmp>`、`<plaintext>`和`<listing>`则是不同类型的...