超链接选择器实用

开发工具与关键技术：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>

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