SEARCH
新闻资讯

网站知识库

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

2020/5/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 所以文本仍然是可见的。


如没特殊注明,文章均为成都网站建设公司唯赛网络原创,转载请注明来自http://www.weseo.cn/News/knowledge_675_12275.html

Contact

ADD:成都市青羊区光华东三路西环广场6楼

TEL:028-64232097

Wechat

微信二维码