超链接选择器实用

开发工具与关键技术：DW   前端开发

作者：陈芝番

撰写时间：2019.2.7

以下是我们常访问网页常用的选择器，超链接选择器是选择器其中一种，特别注意：：hover 用于当用户把鼠标移动到元素上面时的效果；active 用于用户单击元素时的效果；接下来是超链接的整体布局：

Style  CSS

div{
        margin-left: 500px;
    }
ul{
        width: 350px;
        height: 30px;
        background-color:#937E7F;
    }
li{
        padding: 5px 5px 2px 5px;
        font-size: 13px;
        color:#424242;
        list-style: none;
        float: left;
    }
a:hover,a:active{
        font-size: 14px;
        color:white;
    }    
ul li a{
        text-decoration: none;
    }

点击一下新浪网，即实现网页跳转效果

当然点击QQ，百度，CSDN官方APP，也会实现相同的

跳转效果，就不一一点击了，有兴趣的可以尝试！

HTML

    <li id="qw">点击链接网站</li>
    <li><a href="http://www.sina.cn" target="_blank">新浪网</a></li>
    <li><a href="http://www.qq.com" target="_blank">QQ</a></li>
    <li><a href="http://www.baidu.com" target="_blank">百度</a></li>
    <li><a href="https://blog.csdn.net">CSDN官方APP</a></li>

这一效果只有当用户和网站交互的时候才能体现出来！