新型超链接交互样式设计与实现 - 网站建设-网站推广-广州宏蓝计算机科技有限公司-专业网站建设服务商

关于宏蓝

最新新闻

您当前的位置：首页 >> 网站专题（广州专业做网站公司服务热线：020-85562980）

新型超链接交互样式设计与实现

时间: 2013/2/21 10:07:48　　点击: 3504

链接的高度让这条线变成一条可以交互操作的 “删除线” 呢？当然是可以的，我们只需要把 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 浏览器兼容性不太好。

制作这样一个超链接的交互样式非常简单，而且交互效果很不错，平时我们应该多一点细心和发散思维，才能不断提高用户体验。