星辰电脑

 找回密码
 立即注册

超链接无下划线用css如何实现?

[复制链接]
tianya 发表于 2016-12-22 15:48:22 | 显示全部楼层 |阅读模式
在一个网页中有若干对文字A超链接锚文本,但默认情况下带链接文字是有下划线效果的。如何使用CSS实现超链接无下划线样式呢?
通过CSS设置要想让带超链接锚文本字体文字默认下划线消失,我们需要CSS样式单词text-decoration去掉下划线
具体去掉全网页默认链接下划线实现无下划线CSS代码如下:

  • a{text-decoration : none}
以上CSS代码即可实现取消去掉下划线。
DIV CSS知识扩展,默认链接无下划线效果,当鼠标移到对应文字上方悬停对应文字字体出现下划线,CSS样式代码:


    a{text-decoration : none}
  • a:hover{text-decoration:underline}
这样就会让网页中带链接文字下划线默认情况消失,但鼠标移到锚文本文字上方悬停时才出现下划线样式效果。
以下为,默认情况下带链接文字没有下划线,鼠标经过悬停在锚文本字体上方时出现CSS下划线
实例完整HTML源代码


    <!DOCTYPE html> <html>

    <head>

    <meta charset="utf-8" />

    <title>无下划线实现 DIVCSS5</title>


    <style> a{ text-decoration:none} a:hover{ text-decoration:underline}

    </style>

    </head>

    <body> 还有来到

    <a >divcss5</a>

    关于默认链接无下划线实例

    </body>
  • </html>
链接文字无下划线效果截图:

默认链接无下划线,鼠标经过出现CSS下划线效果截图
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|星辰生活网

GMT+8, 2017-5-29 10:08 , Processed in 0.317478 second(s), 28 queries .

Powered by 星辰生活网

© 2008-2016 星辰科技

快速回复 返回顶部 返回列表