全网页CSS 超链接无下划线

最新推荐文章于 2024-03-02 20:44:08 发布

往事不堪回首..

最新推荐文章于 2024-03-02 20:44:08 发布

阅读量8.9k

点赞数 5

全网页CSS 超链接无下划线如何实现？

在一个网页中有若干对文字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 href="http://www.divcss5.com/">divcss5</a>关于默认链接无下划线实例 
</body> 
</html>