当前位置: 移动技术网 > IT编程>网页制作>CSS > 设置超链接文本修饰教程

设置超链接文本修饰教程

2018年02月25日  | 移动技术网IT编程  | 我要评论
设置超链接文本修饰教程 1、效果 2、代码 <!DOCTYPE html> <html lang="en">
设置超链接文本修饰教程

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

\

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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网