• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-decoration文本装饰 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

text-decoration文本装饰

语法
接下来,我们讨论 text-decoration 属性,这是一个很有意思的属性,它提供了很多非常有趣的行为。
text-decoration 有 5 个值:none | underline | overline | line-through | blink
不出所料,underline 会对元素加下划线,就像 HTML 中的 U 元素一样。overline 的作用恰好相反,会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线,等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁,类似于 Netscape 支持的颇招非议的 blink 标记。
none 值会关闭原本应用到一个元素上的所有装饰。通常,无装饰的文本是默认外观,但也不总是这样。例如,链接默认地会有下划线。如果您希望去掉超链接的下划线,可以使用以下 CSS 来做到这一点:

a {text-decoration: none;}

注意:如果显式地用这样一个规则去掉链接的下划线,那么锚与正常文本之间在视觉上的唯一差别就是颜色(至少默认是这样的,不过也不能完全保证其颜色肯定有区别)。

小程序应用

Wxml代码

<view>
  <text class='cls1'>顶端线条</text>
  <text class='cls2'>底部线条</text>
  <text class='cls3'>中间贯穿线</text>
</view>

Wxss代码

view{
  margin-top: 10px;/*距离顶部的外边距*/
}
/*文本装饰*/
.cls1{
 text-decoration: overline;/*上划线*/
}
.cls2{
 text-decoration: underline;/*下划线*/
}
.cls3{
 text-decoration: line-through;/*中间画一个贯穿线*/
}

效果下图

欢迎大家收看我的****:微信小程序样式入门到精通(wxss,css)(微信小程序界面设计必备技能)


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap