设置超链接文本修饰教程
程序员文章站
2022-04-24 17:19:02
设置超链接文本修饰教程
1、效果
2、代码
...
设置超链接文本修饰教程
1、效果
2、代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接文本修饰</title> <style type="text/css"> #a1 { text-decoration: none; } #a2 { text-decoration: underline; } #a3 { text-decoration: overline; } #a4 { text-decoration: line-through; } #a5 { text-decoration: blink; } #a6 { text-decoration: underline overline; } li { line-height: 30px; } </style> </head> <body> <ul> <li><a id="a1" href="#">泸州职业技术学院</a></li> <li><a id="a2" href="#">泸州职业技术学院</a></li> <li><a id="a3" href="#">泸州职业技术学院</a></li> <li><a id="a4" href="#">泸州职业技术学院</a></li> <li><a id="a5" href="#">泸州职业技术学院</a></li> <li><a id="a6" href="#">泸州职业技术学院</a></li> </ul> <script type="text/javascript"> var a5 = document.getElementById("a5"); setInterval('blinkObj(a5)', 500); function blinkObj(obj) { obj.style.visibility = obj.style.visibility == "hidden" ? "visible" : "hidden"; } </script> </body> </html>
说明:第五个超链接,设置text-decoration为blink,其实没有闪烁效果,而是通过js来实现闪烁效果的。
一般情况下,超链接有下划线比较好。除非菜单项或按钮,用户清楚那是超链接,那时去掉下划线也是可以的。 <
上一篇: iOS 11.3正式版发布时间曝光:做好升级准备吧
下一篇: 利用CSS实现悬停下拉菜单(代码教程)