W3C官网超链接交互样式设计与实现

Author : lovecicy

w3c logo

超链接是网页中,必不可少的内容。超链接的交互设计,也是一个网页中最重要的细节。CSS 也为链接准备了几个伪类选择器,用来设置超链接的交互操作。但是在绝大多数网站中,我们看到的超链接交互样式,通常是:改变一下链接的颜色、取消或者增加下划线、点击链接文本变色或者下划线消失等等。但实际上,超链接的交互设计,并非只能这么简单。 W3C 的官方网站的超链接交互性不错,而且突破常规,下面我们来分析一下。下图是超链接交互性操作,当然推荐直接去 W3C 官方网站看效果。 实现原理和分析 首先,仍然是常规的超链接样式,带一条下划线,但是与普通的超链接样式不同的是,这条下划线要粗(2px 普通的 1px),同时这个下划线和文字颜色不同(用 color 和 text-decoration 定义的超链接下划线颜色是和文本相同的)。所以可以肯定,这个下划线是使用 border-bottom 属性定义的,并且 padding-bottom 了几个像素,空开一定距离。然后交互性操作就很简单了,只需要改变一下底边框的颜色就可以了。当点击事件发生的时候,超链接不是简单的改变了颜色,而是向下移动了几个像素,这样给人的错觉[Read More]

standard