加载中 ...
首页 > 建站 > 经验 > 正文

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

2019-04-27 11:03:09 来源:

超链接是网页中,必不成少的内容。超链接的交互设计,也是一个网页中最主要的细节。CSS 也为链接筹办了几个伪类选择器,用来设置超链接的交互操纵。可是在绝年夜大都网站中,我们看到的超链接交互样式,凡是是:改变一下链接的色彩、打消或增添下划线、点击链接文本变色或下划线消逝等等。但现实上,超链接的交互设计,并不是只能这么简单。

W3C 的官方网站的超链接交互性不错,并且冲破常规,下面我们来阐发一下。下图是超链接交互性操纵,固然保举直接去?W3C 官方网站看结果。

实现道理和阐发

起首,依然是常规的超链接样式,带一条下划线,可是与通俗的超链接样式分歧的是,这条下划线要粗(2px 通俗的 1px),同时这个下划线和文字色彩分歧(用 color 和 text-decoration 界说的超链接下划线色彩是和文底细同的)。所以可以必定,这个下划线是利用 border-bottom 属性界说的,而且 padding-bottom 了几个像素,空开必然间隔。然后交互性操纵就很简单了,只需要改变一下底边框的色彩便可以了。当点击事务产生的时辰,超链接不是简单的改变了色彩,而是向下移动了几个像素,如许给人的错觉就是按下去了一样。关于这个的实现,需要利用 position 的 relative 属性,激活 top 属性,便可让超链接离开本来位置向下偏移必然间隔。

既然道理阐发终了,那末我们就起头写出响应代码吧。

HTML 布局

随意输入一些字,加上个链接就OK了。

这里是 **** 随意打的一些字,用来做链接交互样式的演示,链接在这里.

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 所以文本依然是可见的。

div a{text-decoration:none;color:#000;padding-bottom:1px;height:6px;display:inline-block;}

如许就实现了下图结果

需要注重的是 a 元素是行间元素,直接对其利用 height 是没有感化的,可是对其加上 display:block 酿成块元素,则会离开文本,所以需要添加 inline-block 属性。可是如许,对初期的 IE 阅读器兼容性不太好。

建造如许一个超链接的交互样式很是简单,并且交互结果很不错,日常平凡我们应当多一点仔细和发散思惟,才能不竭进步用户体验。

文:我爱水煮鱼

“广域创业网”的新闻页面文章、图片、音频、视频等稿件均为自媒体人、第三方机构发布或转载。如稿件涉及版权等问题,请与

我们联系删除或处理,客服邮箱,稿件内容仅为传递更多信息之目的,不代表本网观点,亦不代表本网站赞同

其观点或证实其内容的真实性。