欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

设置超链接文本修饰教程

程序员文章站 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来实现闪烁效果的。

设置超链接文本修饰教程

一般情况下,超链接有下划线比较好。除非菜单项或按钮,用户清楚那是超链接,那时去掉下划线也是可以的。 <