描点链接元素的优化提升用户体验

      用一些大网站的时候，发现有一个很细节的共同点：点击链接元素的时候，链接元素会产生一个明显的边框，而且这个边框的颜色和#f27b04很接近，我觉得既然很多大网站都这么做，这其中肯定有一些用户体验方面的东西，也就是点击的时候，页面告诉用户：我已经知道你刚刚点击了我。我觉得这确实是一个我之前忽略了的体验：没有通过链接元素提升用户体验。于是模拟实验了一下，不难，但是以后都需要注意起来。以下是一些demo实践：

     

<a href="#">返回顶部</a>
  <a href="#">返回顶部</a>
  <a href="#">返回顶部</a>

a{
      color:green;
      text-decoration:none;
      float:left;
      width:80px;
      height:30px;
      margin-left:30px;
      margin-top:20px;
      margin-right:10px;
      text-align:center;
      line-height:30px;
      border:3px solid #ccc;
      background:#fff;
   }
a:active{
      border:3px solid #f27b04;
   }

这个demo在ie和谷歌下面有点差异：ie下，点击a元素之后只要你不点击其他元素，那个颜色框一直都在，而在谷歌下面，这个框只有点击的时候才存在，也就是瞬间展示。这个体验上的差异的影响说大也不大，而如果需要更加苛求一点的话可以用class和addClass来做。

 

转载于:https://www.cnblogs.com/xuchaosheng/p/3177524.html