设置超链接文本修饰教程-前端--易笔记

设置超链接文本修饰教程

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来实现闪烁效果的。

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

时间：2018/2/24 14:09:02