精华内容
下载资源
问答
  • 文字下划线效果(标题hover效果)

    千次阅读 2016-09-12 15:58:58
    文字下划线效果(标题hover效果) <!-- html结构 --> (0);" class="demo1">自己实现的hover效果 </div>/* css样式 */ .demo1{ position: relative; text-decoration: non

    文字下划线效果(标题hover效果)
    文字下划线效果

    <!-- html结构 -->
    <div>
    <a href="javascript:void(0);" class="demo1">自己实现的hover效果</a>
    </div>
    /* css样式 */
            .demo1{
                position: relative;
                text-decoration: none;
                font-size: 20px;
                color: #333;
            }
            .demo1:before{
                content: "";
                position: absolute;
                left: 50%;
                bottom: -2px;
                width: 0;
                height: 2px;
                background: #4285f4;
                transition: all .3s;
            }
            .demo1:hover:before{
                width: 100%;
                left: 0;
                right: 0;
            }

    关键在于没有hover的时候定义width为0,这样可以实现宽度从0到100%的变化。

    left为50%,目的是为了动画开始的位置是在50%的位置。

    方法二:

    <!-- html结构 -->
    <div>
        <a href="javascript:void(0);" class="demo2">Hexo next主题的实现</a>
    </div>
    /* css样式 */
            .demo2{
                position: relative;
                text-decoration: none;
                font-size: 20px;
                color: #333;
            }
            .demo2:before{
                content: "";
                position: absolute;
                left: 0;
                bottom: -2px;
                height: 2px;
                width: 100%;
                background: #4285f4;
                transform: scale(0);
                transition: all 0.3s;
            }
            .demo2:hover:before{
                transform: scale(1);
            }

    这个实现的关键就是scale(0)到scale(1)的变化。

    CSS3的scale transform的原点是中点,所以会从中间的位置开始动画。

    两者区别
    通过动画也看出来,next的动画有透明渐变的效果,和scale的表现形式有关。

    第一个实现只是width变化,但是也可以用animation实现和next一样的效果。

    展开全文
  • Web上的下划线样式

    千次阅读 2020-06-27 00:04:51
    对链接下方的下划线进行样式设置可能是一项棘手的工作,而我经常会视情况而忘记最佳方法。 不过,值得庆幸的是, 约翰·詹姆森 ( John ... 他们只是想在其文字下方创建一个看起来很普通的线条。 细的黑色下划...

    对链接下方的下划线进行样式设置可能是一项棘手的工作,而我经常会视情况而忘记最佳方法。 不过,值得庆幸的是, 约翰·詹姆森John Jameson)使我们加快了这篇宾客帖子的速度。

    有多种不同的样式可以用来标记下划线。 也许您还记得这篇文章Crafting链接在Medium上强调 中型并没有做任何疯狂的事情; 他们只是想在其文字下方创建一个看起来很普通的线条。

    黑色细底线,下边框周围有空格
    细的黑色下划线,下级周围有空白-通过Marcin Wichary, “中型”Craft.io路线下划线

    这是一个非常基本的下划线,但是它的大小合适,并且也跳过了下划线。 绝对好于大多数浏览器的默认设置。 好吧,事实证明,要在网络上获得该样式,Medium必须经历很多麻烦。 两年后,要绘制漂亮的底线仍然很困难。

    目标

    仅使用text-decoration: underline什么问题? 如果我们在谈论理想情况,则下划线应该能够执行以下操作:

    • 将自身置于基线以下
    • 跳过后代
    • 更改颜色,厚度和样式
    • 重复换行文字
    • 在任何背景下工作

    我认为这些都是非常合理的要求,但是据我所知,没有直观的方法可以在CSS中实现所有这些。

    方法

    那么,我们可以在网络上加下划线的所有不同方式有哪些?

    这是我能想到的:

    • text-decoration
    • border-bottom
    • box-shadow
    • background-image
    • SVG过滤器
    • Underline.js(画布)
    • text-decoration-*

    让我们一一列出,并讨论每种方法的优缺点。

    文字装饰

    text-decoration是在文本下划线的最直接方法。 您只需应用一个属性,便可以使用它。 在较小的尺寸下,它看起来很不错,但是增加了字体大小,同一行开始显得笨拙。

    参见演示

    text-decoration的最大问题是缺乏可定制性。 它使用其所应用的任何文本的颜色和字体大小,并且没有跨浏览器的方式来更改样式。 以后再说。

    • 易于使用
    • 定位在基线以下
    • 在Safari和iOS中默认跳过后裔
    • 跨行包装
    • 适用于任何背景
    • 无法在其他浏览器中跳过后代
    • 无法更改颜色,厚度或样式

    底边

    border-bottom快速可自定义之间提供了良好的平衡。 这种方法使用了久经考验CSS边框,这意味着您可以轻松更改颜色,厚度和样式。

    这是inline元素上的border-bottom外观:

    参见演示

    最大的问题是,下划线与文本的距离有多远-完全位于下划线的下方 您可以通过将元素设置为inline-block并减小line-height ,但随后您将无法包装文本。 适用于单行,但别无其他。

    参见演示

    此外,您可以使用text-shadow来遮盖下移线附近的行的一部分,但是您必须使用与背景颜色相同的颜色来伪造它。 这意味着它仅适用于纯色背景,不适用于渐变或图像。

    参见演示

    此时,有四个属性为单个下划线设计样式。 这比text-decoration要多得多。

    • 可以使用text-shadow跳过后代
    • 可以更改颜色,厚度和样式
    • 可以过渡和动画化颜色和厚度
    • 默认包装,除非它是inline-block
    • 可以在任何背景下使用,除非使用text-shadow
    • 位置较远且难以重新定位
    • 许多无关的属性使其正确无误
    • 使用text-shadow时选择混乱的文本

    盒子阴影

    box-shadow绘制带有两个内嵌框阴影的下划线:一个用于创建矩形,另一个用于覆盖矩形。 这意味着您需要扎实的背景才能工作。

    请参阅CodePen上的John D. Jameson( @johndjameson撰写的Pen Underlines 5:box-shadow

    您可以使用相同的text-shadow技巧来伪造下划线和文本后代之间的间隙。 但是,如果线条的颜色与文本不同,或者甚至足够细,它实际上不会像text-decoration那样发生冲突。

    • 可以位于基线以下
    • 可以使用text-shadow跳过后代
    • 可以改变颜色和厚度
    • 跨行包装
    • 不能改变风格
    • 在任何背景下均无效

    背景图像

    background-image与我们想要的一切最接近,并且获取的麻烦最少。 想法是使用linear-gradientbackground-position来创建图像,该图像在文本行之间水平地重复。

    您将必须display: inline; 这种方法也是。

    参见演示

    这种方法也不必使用linear-gradient 您可以带来自己的背景图片以获得一些很酷的效果。

    参见演示

    • 可以位于基线以下
    • 可以使用text-shadow跳过后代
    • 可以更改颜色,厚度(允许半个像素)和样式
    • 使用自定义图像
    • 跨行包装
    • 可以在任何背景下使用,除非使用text-shadow
    • 图像在分辨率,浏览器和缩放级别上可以不同地调整大小

    SVG过滤器

    这是我一直在尝试的一种方法:SVG过滤器。 您可以创建一个内联SVG filter元素,该元素绘制一条线,然后展开文本以遮盖我们希望透明的部分线。 然后,您可以为filter指定一个id ,并在CSS中使用类似filter: url('#svg-underline')引用filter: url('#svg-underline')

    这样做的好处是,过滤器无需依赖text-shadow即可增加透明度。 这意味着您可以在任何背景(包括渐变和背景图像)的顶部跳过降序! 不过,此代码仅适用于一行文本,因此请单方面注意。

    参见演示

    这是在Chrome和Firefox中的外观:

    IE,Edge和Safari中的浏览器支持存在问题。 很难在CSS中测试SVG过滤器支持。 您可以将@supportsfilter @supports使用,但这只会测试引用是否有效,而不是所应用的过滤器本身。 我的方法最终会使浏览器略微嗅探,因此也要加倍小心。

    优点
    • 定位在基线以下
    • 跳过后代
    • 能够更改颜色,厚度和样式
    • 适用于任何背景
    缺点
    • 不跨越线
    • 在IE,Edge或Safari中不起作用,但是您可以使用text-decoration Safari的底线看起来仍然不错。

    Underline.js(画布)

    Underline.js令人着迷。 我认为Wenwen Zhang用JavaScript能够做的事以及对细节的关注给人留下了深刻的印象。 如果您以前没有看过Underline.js 技术演示 ,请绝对停止阅读一分钟并进行检查。 关于它的工作原理 ,有一个长达九分钟的有趣的演讲,但我会给您一个简短的版本:它使用<canvas>元素画出下划线。 这是一种新颖的方法,效果惊人。

    尽管名称很吸引人,但是Underline.js只是一个技术演示 这意味着您必须先对其进行大量修改,才能将其放入任何项目中。

    值得在这里提出它作为概念证明。 <canvas>有可能创建漂亮的交互式下划线,但是您必须编写一些自定义JavaScript才能使它们起作用。

    text-decoration- *属性

    还记得“稍后再说”的部分吗? 好吧,我们到了。

    text-decoration本身可以很好地工作,但是您可以添加一些实验属性来自定义其外观:

    • text-decoration-color
    • text-decoration-skip
    • text-decoration-style

    只是不要太兴奋。 您知道, 浏览器支持

    文字装饰颜色

    text-decoration-color可以将下划线的颜色与其文本颜色分开更改。 该属性甚至具有比预期更好的浏览器支持-它可在Firefox中工作,并在Safari中作为前缀。 这里有个要注意的地方:如果您不清除后代,Safari会将行放在文本的顶部 🙃

    Firefox:

    苹果浏览器:

    文本装饰跳过

    text-decoration-skip切换在带下划线的文本中切换跳过的下降器。

    此属性是非标准属性,目前仅在Safari中-webkit- ,因此您需要-webkit-前缀才能使用它。 Safari默认情况下会启用此属性,这就是为什么即使在未指定下划线的网站上,下划线也会跳过下划线的原因。

    如果您使用的是Normalize,请知道最新版本会禁用该属性,以使浏览器之间的内容保持一致。 如果您想要这些梦幻般的下划线,则需要重新打开它。

    文字装饰风格

    text-decoration-style提供了与border-style相同的线条,但也添加了wavy线。

    您可以使用以下不同的值:

    • dashed
    • dotted
    • double
    • solid
    • wavy

    目前, text-decoration-style仅在Firefox中有效,因此以下是屏幕截图:

    各种纯色下划线样式

    看起来熟悉?

    少了什么东西?

    与使用其他CSS属性设置下划线样式相比, text-decoration-*属性要直观得多。 但是,如果我们再看一下我们先前的要求,则这些属性无法提供指定线宽或位置的方法。

    经过一些研究,我发现了以下两个属性:

    • text-underline-width
    • text-underline-position

    看起来好像他们是在CSS的早期草案中提出的,但是由于缺乏兴趣而从未实现。 嘿,别怪我。

    外卖

    那么在文本下划线的最佳方法是什么?

    这取决于。

    对于小文本,我建议使用text-decoration ,然后乐观地在顶部应用text-decoration-skip 在大多数浏览器中,它看起来有些乏味,但强调始终看起来像这样,人们似乎并不介意。 另外,总是有机会,如果您足够耐心,以后所有下划线都将变得很棒,而您无需进行任何更改。

    对于正文,可能使用background-image方法。 它可以工作,看起来很棒,并且有Sass mixins 如果下划线较细或颜色与文本不同,则可以省略text-shadow

    对于单行文本,请使用border-bottom以及您想使用的其他任何属性。

    而要跳过渐变或背景图像顶部的下降器,请尝试使用SVG滤镜。 或者只是避免完全使用下划线。

    将来,当浏览器支持更好时,答案一直是text-decoration-*


    另请参阅本杰明·伍德拉夫(Benjamin Woodruff)的文章CSS Underlines Suck ,它以类似的方式巧合地践踏了这一点。

    翻译自: https://css-tricks.com/styling-underlines-web/

    展开全文
  • HTML中的下划线曾经是将文本包含在<...html文字下划线方法?下面我们来总结一下。 首先小编在这里谢谢大家一直的支持,每天都会更新十个web前端基础内容,需要的可以关注我,另外也可以进我的web学习交流群104...

    HTML中的下划线曾经是将文本包含在<u></u>标签中的问题,但是这种方法已被放弃,而更倾向于使用更多功能的CSS。一般来说,下划线被认为是引起人们对文本注意的一种方式,那么HTML怎么设置下划线?html文字加下划线方法?下面我们来总结一下。

    首先小编在这里谢谢大家一直的支持,每天都会更新十个web前端基础内容,需要的可以关注我,另外也可以进我的web学习交流群1045267283,领取资料学习资料笔记,可以跟里面的小伙伴一起学习一起成长,不懂的问题也可以问我,随时给大家解答。再次感谢大家。

    1.使用“text-decoration”CSS样式属性,使用<u>标签不再是强调文本的正确方法。而是使用“text-decoration”CSS属性,语法为:< span style = “text-decoration:underline;” >这将加下划线< / span >。
    2.如果要为某段文本加下划线,请使用<span>标签,将开始标签与“text-decoration”属性一起放在要开始下划线的位置。将结束</span>放置在您想要停止的位置。
    3.在页面的<style>部分声明HTML元素。您也可以在CSS样式表上执行此操作,首先通过将HTML元素声明为样式,可以使下划线过程更容易。例如,要使所有3级标题加下划线,请将以下内容添加到CSS样式部分:
    4.创建一个CSS,以便随时快速在样式表或<style>部分中实现下划线,您可以创建要在以后调用的类名。

    代码实例:

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>下划线 删除线 上划线实例 </title> 
    <style> 
    .php{text-decoration:underline} 
     </style> 
    </head> 
     <body> 
    <div class="php">我被加下划线</div>  
    </body> 
    </html> 

    代码显示结果:

    5.考虑其他突出文本的方法。应避免使用下划线以避免混淆读者。一种流行的方法是使用<em>标记,它将文本设为斜体。您可以使用CSS进一步定义此标记以获得独特的重点。

    以上就是对 HTML怎么设置下划线?html文字加下划线方法的全部介绍,更多内容关注我!

    展开全文
  • 怎么给文字插入下划线?下面本篇文章给大家介绍一下HTML和word文档中给文字插入下划线的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。HTML中给文字插入下划线在HTML中想要给文字下划线...

    怎么给文字插入下划线?下面本篇文章给大家介绍一下HTML和word文档中给文字插入下划线的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    351e885473d12c6d13cc27439104b983.png

    HTML中给文字插入下划线

    在HTML中想要给文字加下划线可以使用标签来实现。

    下划线标签的语法:我被加下划线了

    来看个完整代码的用法实例:

    这里是HTML中文网!

    HTML中文网网址:www.html.cn !

    效果图:

    04c1658390ec38795d95684a5f28b69a.png

    可以清楚的看到,我把网址给加了一个下划线,是不是和a标签下的网址差不多了,在加个颜色就更像了,但是,我们这个点击不了了,也不会跳转。这只是个样子而已。

    现在我们再来看看u标签下划线的使用说明吧:

    下划线标签告诉浏览器把其加u标签的文本加下划线样式呈现显示给浏览者。对于所有浏览器来说,这意味着要把这段文字加下划线样式方式呈现给大家显示。

    标签修饰的内容将被加下划线。

    如果使用html u对文字内容下划线样式,又不想显示下划线,可以使用CSS样式设置去掉u标签下划线样式。

    word文档中给文字下方插入下划线

    方法1:

    ①我们还是通过word2013建立一张带有文字的文档,如图。

    683641426b46d681a02202011a444324.png

    ②然后选中我们打算添加下划线的文字内容,接着点击格式栏的“字体”——“下划线”,我们以整个文档为例,如下图,我们选择全部文字内容

    68b350f15ac5fdf25555a91fcaa5e5b2.png

    ③然后点击字体下的下划线图标,然后我们就看到所有文字下方都有了下划线

    0f64835ab77c87a2ec2431054b3a088d.png

    4e559bc5dc838d2dd8ff03c9eb7a60dc.png

    方法2:利用快捷键添加下划线

    这种方法只适用于在文档的空白处添加哦,将光标定位在要添加下划线的位置,然后同时按住"SHIFT"和"-"组合键即可打出下划线,我们需要多长就按多久,目前亲测可以适用于任何输入法哦...

    96b5a647a4124f6b24ab67fa5dd7ba49.png

    更多web前端开发知识,请查阅 HTML中文网 !!

    展开全文
  • 7种方式实现web下划线

    千次阅读 2016-11-01 07:51:06
    本文来自css-tricks,介绍了在不同的场景下实现下划线的7种方式。...Medium也不是想做什么疯狂的事情,他们只是想让他们的文字下面好看一点。 这是一条基本的下划线,它大小合适。绝对比浏览器的默认样式好看的...
  • 有很多种添加下划线样式的方法。可能你还记得《Crafting link underlines on Medium》这篇文章。Medium 并没有尝试特殊的方法,只是想创建一个漂亮的看起来正常的下划线。一条纤细的黑色下划线并且与下行字母有间隙...
  • 这个同样是一个CSS样式的问题。...其中,上面的四个英文中,link是连接在平常的状态,active是在按下的那一刻的状态,visited是被访问完了过后的状态,hover是鼠标放置于超链接文字上面未点击的状态。...
  • 1.文字水平对齐 text-align:值 取值 :left right center 2.文字首行缩进 text-indent:值; 推荐写法:text-indent:2em em 相对像素,相对文字大小 3.行高 行高控制的是文字文字之间的上下距离(行距) ...
  • 利用...NSMutableAttributedString *str =[ [NSMutableAttributedString alloc] initWithString:@"按钮的文字"]; NSRange strRange = {0,[str length]}; [str addAttribute:NSUnderlineStyleAttrib
  • jQuery.validator.addMethod("alnum", function(value, element) { return this.optional(element) || /^[a-zA-Z0-9_]+$/....}, "只能包括英文字母数字下划线"); $("#form1").validate({ rules:{ adminName:{ r
  • 自定义下划线。使用:after,首先添加一个空的内容,为了让它排列到标题的下面,需要将其变成块级元素,用border-bottom设置下划线,可设置其颜色、粗细。下划线的长度通过设置空内容的width属性来实现,还可以...
  • 微信小程序例子——使用画布组件绘制一个带阴影及下划线文字
  • --这里的一句就是连接没有下划线的说明  --> 好多野以前用过,但一不常用就要看帮助或者上网找了,还是记下来好。 转载于:https://www.cnblogs.com/pyman/archive/2008/10/16/1312358.html
  • 文字处理 加粗、斜体、下划线 示例代码 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&...
  • web 开发笔记”A标签去掉下划线

    千次阅读 2014-11-17 15:30:58
    <style type="text/css"> <!-- a:link { text-decoration: none;color: blue} ...a:active { text-decoration:blink} ...a:hover { text-decoration:underline;...underline参数表示超链接的文字下划线
  • Web 前端】文字排版、段落排版

    千次阅读 2014-11-09 11:52:41
    文字排版下划线 a{text-decoration:underline}
  • 美化下划线

    千次阅读 2017-06-01 20:30:41
    不过我们一般都在初始化里把a标签的下划线去掉(text-decoration : none ),有没有想过美化这些下滑下划线呢~理想的场景中,强调使用下划线,它应该做到以下几点: 下划线应该位于文本基线(baseline)下方 下划线...
  • 目录 1. 单位 2. 颜色 3. 文本 3.1 字符间距letter-spacing 3.2行高line-height ...3.2.2 行高的应用——居中垂直对齐效果 ...3.4.2装饰线的应用——去掉超链接下划线 4. 字体 4.1 基本用法 ...
  • 大家很熟悉的 CSS2 用法 text-decoration ,到了 CSS3 就拥有很多新...文字修饰线:text-decoration-line text-decoration-line也就是 CSS3 之前的 text-decoration,属性有如下的属性值: 属性值 效果 none...
  • HTML下划线用虚线表示

    万次阅读 2018-01-23 11:19:01
    1.html代码 abbr style="border-bottom: 1px dotted #000; ">文本abbr>br/> abbr style="border-bottom: 1px dotted #000; ">          ...2.显
  • 其中前两行的作用是对网页文字的字体、大小、颜色等的控制,而后五行则是对链接的色彩及下划线的控制。  1.文字控制  例中的前两行:  P {FONT-FAMILY: 宋体; FONT-SIZE: 9pt; LINE-HEIGHT: 12pt; ...
  • TextView使用超链接去掉下划线

    千次阅读 2013-12-24 14:20:40
    项目中有一个小需求,就是在textview中支持web地址,这个属性好设置,在textview中配置文件加一行android:autoLink="web"搞定,可是默认的textview样式中带有下划线,连接颜色是蓝色,这个颜色好改,有专门的方法,...
  • Web标准的构成 主要包括结构、表现、行为三方面。 结构:html 表现:css 行为:javascript 标签含义 文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面。 <> ...
  •  我们在进行Web页面设计的时候,根据不同的需要,可能会想要去除链接下划线的效果。而此效果只需要一句话就可以解决了。代码如下: text-decoration:none; 如果保留着链接文字下划线,默认的颜色属性是如链接...
  • 一、Web端实现 最近遇到了一个问题,老大要求实现对WebView加载的html页面实现选中修改背景色以及添加下划线并可以删除,最后可以保存这些修改,下次进入该html界面时仍然能够显示之前添加的背景色以及下划线。 1....
  • a:link 指正常的未被访问过的链接; a:active 指正在点的链接; a:hover 指鼠标在链接上; a:visited 指已经访问过的链接;...none参数表示超链接文字不显示下划线; underline参数表示超链接的文字下划线 ...
  • java web面试题

    千次阅读 2014-07-20 22:10:38
    java web面试题
  • Web测试方法

    千次阅读 2011-12-06 10:01:21
     在 Web 工程过程中,基于 Web 系统的测试、确认和验收是一项重要而富有挑战性的工作。基于 Web 的系统测试与传统的软件测试不同,它不但需要检查和验证是否按照设计的要求运行,而且还要测试系统在不同用户的...
  • WEB控件

    千次阅读 2004-10-30 16:21:00
    web控件确与我们平常见到的有很大的出入,不知道大家还记不记得我说过的一句话,那就是ASP.net的程序就像是写VBVC中的窗口,先再这些窗口中加入我们的需要的控件,然后再对这些控件进行操作。如果你学过一点点VBVC...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,888
精华内容 9,955
关键字:

web文字下划线