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 来实现闪烁效果的
一般情况下, 超链接有下划线比较好除非菜单项或按钮, 用户清楚那是超链接, 那时去掉下划线也是可以的 <
来源: https://www.2cto.com/kf/201802/723151.html