[CSS]分享几条漂亮的下划线样式

最新推荐文章于 2023-11-16 17:49:24 发布
最新推荐文章于 2023-11-16 17:49:24 发布
阅读量3.2k 收藏
点赞数
分类专栏： .net(c#) 文章标签： css stylesheet class html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ysf871104/article/details/4994912
版权

使用方法：

1.后台管理->设置：[页首Html代码]里面加上下面这句：

view source
print ?
1<LINK href="http://files.cnblogs.com/justinw/underline.css" type=text/css rel=stylesheet>

2.在正文中使用类似如下的写法，将需要用下划线标注的文字包在特定的cass="underline数字"的标签里：

view source
print ?
1<P>underline1:<SPAN class=underline1>从前有座山，山里有个老和尚...</SPAN></P>

3.最终显示的效果如下所示：

underline1:从前有座山，山里有个老和尚...
underline2:从前有座山，山里有个老和尚...
underline3:从前有座山，山里有个老和尚...
underline4:从前有座山，山里有个老和尚...
underline5:从前有座山，山里有个老和尚...
underline6:从前有座山，山里有个老和尚...
underline7:从前有座山，山里有个老和尚...
underline8:从前有座山，山里有个老和尚...
underline9:从前有座山，山里有个老和尚...

ysf871104
关注
专栏目录
CSS超链接样式，去除下划线等
可乐的博客
02-16 6806
控制超链接样式 链接的四种状态： a:link - 普通的、未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻 去除CSS超链接下划线 a:link {text-decoration: none} a{ #取消所有样式 text-decoration: none; } text-decorati...
CSS常见样式
makabaka_haha的博客
07-24 2241
CSS常见样式
CSS定义下划线样式
04-28
CSS定义下划线样式_莱茵河的小鱼_新浪博客.mht
CSS position属性总结
solego’s blog
07-16 174
positionpositionposition属性有四个值： 1.1.1. static 默认值，无定位，无top，bottom，left，right设定值效果 .static{ background-color: skyblue; position: static; width: 360px; height: 360px; } 2.2.2. absolute，根据top bottom left right设置值以absolute或relative或body作为标准进行位
css下划线样式
lianghao2008的专栏
08-08 6820
下划线样式 body {  line-height: 24px; } a:link,a:visited {  color: #333;  text-decoration: none; } a:hover {  color: #990;  border-bottom: 1px dashed #990; } .xwgcbt {font-size: 16px;font-weight:bold;} a.
css 下划线所有样式
最新发布
08-02
关于下划线的样式，主要有以下几个方面： 1. `text-decoration`属性：这是控制文本装饰的主要属性，设置`underline`值可以添加下划线。例如： ```css a { text-decoration: underline; } ``` 2. `border-...
css字体下划线的样式
06-19
CSS中的下划线样式主要通过`text-decoration`属性来控制，它可以有几种不同的值： 1. **`none`**：这是默认值，不添加下划线。 2. **`underline`**：为文本添加常规的下划线。 3. **`overline`**：在文本上方添加一...
横排CSS动态导航条亲测修改能用
06-11
2. 将CSS代码模块化，将导航条相关的样式封装在一个单独的类或文件中。 3. 使用媒体查询（media queries）实现响应式设计，以适应不同设备的屏幕尺寸。 总的来说，创建横排CSS动态导航条是一项基础但关键的任务，它...
css设置下划线
fury的博客
11-16 1914
CSS的text-decoration属性用于指定添加到文本的修饰，其underline属性值可以定义文本下的一条线。在CSS中可以使用text-decoration属性或border-bottom属性来给字体设置下划线样式。1、使用text-decoration:underline;
css下划线3种实现方式
yanzhe6789的博客
10-17 2648
渐变色下划线
css 下划线_CSS 文本样式
weixin_39687542的博客
11-29 358
本节我们讲文本样式，像比如设置文本颜色呀，首行缩进、水平对齐等，可以对网页进行排本设置等。将要学习的文本属性有如下几个：color首先我们来讲文本颜色设置，前面我们讲过一节关于如何设置颜色，所以想必大家对如何给文本设置颜色不会。示例：例如给下面的 <p> 标签中的 <span> 标签中的文本，颜色设置为粉色：<CSS 样式代码：span或者使用十六进制颜色值：span...
在html中加入如下html,字下面的下划线怎么打?
weixin_29802189的博客
06-02 1841
字下面的下划线怎么打？本文介绍word 文档下面的字打上下划线和html中文字打上下划线，分别实现的方法！一、word 文档下面的字打上下划线的方法选中要打下划线的文字，使用快捷键Ctrl+U，即可实现文字下划线效果。如下图：二：html中文字下面的下划线可以通过css的text-decoration或border-bottom属性添加，如下：文字下面的下划线可以通过css的text-decora...
css中字体下划线样式,css下划线 浅谈css自定义下划线
weixin_28746207的博客
08-03 4067
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现？我们知道css字体下划线使用text-decoration样式实现，而虚线下划线则不能使用此css样式属性。要实现通过下边框border-bottom实现虚线边框来制作出虚线下划线效果。那么一起来了解一下。css下划线——浅谈css自定义下划线自定义下划线。使用:after，首先添加一个空的内容，为了让它排列到标题的下面...
巧用CSS定义下划线样式
hwj1107的专栏
12-10 1048
CSS为网页设计者们提供了丰富而灵活的页面元素表现形式的控制手段。但是，或许你可能注意到了，对于下划线，CSS提供的可选操作却不是很多。一般情况下，人们看到的下划线基本上都是横直线，缺少生气和灵动。不过，路并不是死的，通过一些绝妙的改造，我们还是可以做出富有创意的下划线来使页面更为美观。 　　这是一个自定义下划线的例子：自定义的下划线 。是不是很酷呢？除了能 让你的网页呈现出一个与众不同的风格之外
使用css实现动态下划线效果
CSU_Zipple的博客
03-17 6002
效果展示 而且下划线是与超链接同色的….大家可以自行测试… 实现方法 这个效果我们可以很方便的使用css伪元素来实现。主要是用到了transform 中的scale来缩放伪元素，达到拉长伪元素（下划线）的结果。同时使用transform-origin来控制缩放方向，下面的源码复制即可使用…. 源码如下 dom: &lt;a href="#" class="supe...
CSS下划线与文字间距，下划线粗细以及下划线颜色的设置
热门推荐
weixin_38091374的博客
02-28 1万+
最开始的时候了解下划线的属性是： text-decoration:underline; 1 但是，很遗憾的是，对于设计做的下划线用浏览器默认属性样式很难调整，使用这个属性并不能调整下划线与文字的间距，而且对于下划线的颜色也不好调整，而使用<u></u>这个标签也是同样的效果。 例子： <!DOCTYPE html> <html> <...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值