官网超链接交互样式设计与实现方式发布者：本站     时间：2020-05-21 20:05:22

实现原理和分析

首先，仍然是常规的超链接样式，带一条下划线，但是与普通的超链接样式不同的是，这条下划线要粗（2px 普通的 1px），同时这个下划线和文字颜色不同（用 color 和 text-decoration 定义的超链接下划线颜色是和文本相同的）。所以可以肯定，这个下划线是使用 border-bottom 属性定义的，并且 padding-bottom 了几个像素，空开一定距离。然后交互性操作就很简单了，只需要改变一下底边框的颜色就可以了。当点击事件发生的时候，超链接不是简单的改变了颜色，而是向 下移动了几个像素，这样给人的错觉就是按下去了一样。关于这个的实现，需要使用 position 的 relative 属性，激活 top 属性，即可让超链接脱离原来位置向下偏移一定距离。

既然原理分析完毕，那么我们就开始写出相应代码吧。

HTML 结构

随便输入一些字，加上个链接就OK了。

这里是 **** 随便打的一些字，用来做链接交互样式的演示，<a href=“#”>链接在这里</a>.

CSS 样式

div { width:300px; margin:20px auto; line-height:24px; }

div a{ text-decoration:none; color：#000; padding-bottom:1px; }

div a:link， div a:visited{ border-bottom:2px solid #f00; }

div a:hover{ border-bottom:2px solid #00f; }

div a:active{ border-bottom:2px solid #00f; outline:0 none; position:relative; top:1px; }

对 div 的宽度定义只是为了好看而已，对行高的定义，是为了不让下划线影响到下一行文字，这个可以自己决定。然后先对 a 标签取消默认的下划线和颜色，再就是交互性的操作。注意，对 :active 使用了 outline 属性，防止有些浏览器在点击超链接的时候，超链接会出现边框。

发散思维

既然是用了边框的方式模拟下划线，那么可不可以通过调整超链接的高度让这条线变成一条可以交互操作的 “删除线” 呢？当然是可以的，我们只需要把 height 属性调小一点同时还需要让 a 的 display 属性变成 inline-block，就可以让边框穿过文字，由于 overflow 的默认属性是 visible 所以文本仍然是可见的。