html如何去掉超链接下划线？html超链接去掉下划线的方法介绍_html-js-css

概述html如何去掉超链接下划线？html超链接去掉下划线的方法介绍前端网页的开发中总是不可避免会使用到超链接，但是使用超链接时下面都会有一条下划线，这在网页中有时会显得很突兀，不合适也不美观，所以我们就需要将超链接下的这条下划线给去掉，接下来的这篇文章就来给大家介绍HTML下超链接去掉下划线的方法。有需要的朋友可以参考一下，话不多说，我们直接来看正文。

在HTML代码中去掉超链接的下划线需要的是CSS中的text-decoration这个属性。

对于text-decoration属性，我们需要定义的参数是 text-decoration:none;就可以去掉超链接的下划线。（关于text-decoration属性中其他参数大家可以参考css学习手册）.

下面我们就直接来看HTML中a超链接去掉下划线的代码。

    <!DOCTYPE HTML>     <HTML>     <head>     <Meta charset="utf-8">     <style type="text/CSS">      a{text-decoration:none}    </style>     </head>     <body>欢迎来到<a href="http://www.jb51.cc/">内存溢出网</a>！    </body>     </HTML>

HTML中a超链接去掉下划线的效果如下：

上面的代码所实现的是将HTML中a超链接下划线直接去掉，可是我们有时候需要让超链接去掉下划线，但鼠标停留在上面时有下划线，这该如何实现呢？下面我们就来直接看一下代码。

<!DOCTYPE HTML> <HTML> <head> <Meta charset="utf-8"> <style type="text/CSS">a:link,a:visited{ text-decoration:none;  /*超链接无下划线*/}a:hover{ text-decoration:underline;  /*鼠标放上去有下划线*/}</style></head> <body>欢迎来到<a href="http://www.jb51.cc/">内存溢出网</a>！</body> </HTML>

说明：上述代码中让超链接去掉下划线，但鼠标停留在上面时有下划线用到了:hover，在样式表里属于伪类，表示鼠标悬停时候的状态。

总结

以上是内存溢出为你收集整理的html如何去掉超链接下划线？html超链接去掉下划线的方法介绍全部内容，希望文章能够帮你解决html如何去掉超链接下划线？html超链接去掉下划线的方法介绍所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1013419.html

html如何去掉超链接下划线？html超链接去掉下划线的方法介绍

发表评论

评论列表（0条）