DIV+CSS教程：[7]顶划线、下划线、删除线

给文字加上下划线、删除线、顶划线在文档编辑中使用很高，如电子商务网站中促销时，也使用到，如把原价打上删除线等。

操作方法

  • 01

    在电子商务网站中，我们常常看到很促销的商品，如促销的商品的原价打上删除线，如下图所示，这种效果其实可以通过CSS中删除线控制实现。

  • 02

    那么CSS是如何实现的呢？其实CSS是通过text-decoration属性进行设置，除了删除线，还可以实现下划线、顶划线。

  • 03

    text-decoration:underline;     下划线 text-decoration:overline;    顶划线 text-decoration:line-through;  删除线 text-decoration:blink;   闪烁 但是闪烁在IE浏览器中并不支持这个效果，所以建议不要使用。

  • 04

    测试案例： <html> <head> <title>文字下划线、顶划线、删除线</title> <style> .one{ text-decoration:underline; } .two{ text-decoration:overline; } .three{ text-decoration:line-through; } </style> </head> <body> <p class="one">下划线文字测试</p> <p class="two">顶划线文字测试</p> <p class="three">删除线文字测试</p> <p>正常文字对比</p> </body> </html>

  • 05

    如果希望一段文字不仅有下划线、删除线还有顶划线，那么他们各个值用空格分开， text-decoration:underline overline line-through;

  • 06

    <html> <head> <title>文字下划线、顶划线、删除线同时有</title> <style> <!-- .test{ text-decoration:underline overline line-through; } /* 三种同时 */ --> </style> </head> <body> <p>文字下划线、顶划线、删除线</p> <p class="test">文字下划线、顶划线、删除线</p> </body> </html> 运行效果显示

赞 (0)

相关推荐

  • word中怎么打下划线 下划线的输入方法详细汇总

    “_”为下划线。下划线的英文单词：underscore underline，键盘上“0”数字后边的按键，英文输入状态下用SHIFT+"-" 就可以在键盘上打出。下划线大家经常接触到的一般用在名字的输入 ...

  • 在word文档中怎么添加下划线?下划线添加方法介绍

    word文档中常常会遇见____这样的下划线,那么这个下划线该如何处理呢,这里跟大家分享下经验,有需要的朋友快快来学习吧! 方法/步骤 1.首先打开word软件 2.比如我们输入“申请人签字:____ ...

  • DIV+CSS教程：设置斜体与英文字母大小写转换

    斜体在日常编写文档时经常用到,在网页中CSS也可以设置,英文字母大小写转换在日常也很常用. 操作方法 01 在CSS斜体是通过font-style属性来设置.如设置斜体代码:font-style:it ...

  • DIV+CSS教程：[4]CSS如何设置文字字体

    CSS也可以像Word编辑那样,可以对文字的字体进行设置.那么CSS是如何对HTML页面中文字进行字体设置的呢? 操作方法 01 在html语言中,文字的字体设置是通过<font face=&q ...

  • 表格添加下划线快捷键（表格下划线快捷键是什么）

    表格添加下划线快捷键（表格下划线快捷键是什么）

    以前的教程中讲述过添加下划线的几种方法,今天有粉丝问到有没有快捷键来完成添加下划线,答案是肯定的,今天就和大家分享利用Ctrl U键来完成添加下划线.一.快捷键Ctrl U添加下划线下划线的快捷键是什 ...

  • 保留PowerPoint超链接,但是取消超链接的下划线

    在PowerPoint中设置文字的超级链接,文字的下面会带有下划线; 下划线严重的影响了演示文稿的大方美观,这个时候,我们如何能做到:即保留超级链接,又取消文字下面的下划线呢? 操作方法 01 本文介 ...

  • CSS教程:创建性感的CSS样式表

    操作方法 01 作为一个css方面的专家,所做的不只是记住选择符(selectors)那么简单,提升样式表的效用和可维护性,以及设计蓝图和管理工作流程都是工作的一部分.在本篇文章中,jina bolt ...

  • Excel2016怎么添加双下划线？Excel2016双下划线设置教程

    在编辑excel2016表格的时候,有时为了美观,可以给一些文字加双下划线.下面我们就来看看怎么样给excel2016表格中文字加双下划线的方法吧. Excel2016双下划线设置教程 我们先来看一下 ...

  • 怎么去掉word下划线 word下划线删除图文教程

    word下划线删除图文教程: 我不知道大家说的是不是这种红色波浪线,红波浪线是word的系统认为该处可能存在单词拼写错误在Word里打字的时候会莫名其妙地出现下划线,而且去字体里看的时候也是显示无下划 ...