首页 > 经验 > 关键词  > W3C官方网站最新资讯  > 正文

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

2013-01-18 11:22 · 稿源:我爱水煮鱼

超链接是网页中,必不可少的内容。超链接的交互设计,也是一个网页中最重要的细节。CSS 也为链接准备了几个伪类选择器,用来设置超链接的交互操作。但是在绝大多数网站中,我们看到的超链接交互样式,通常是:改变一下链接的颜色、取消或者增加下划线、点击链接文本变色或者下划线消失等等。但实际上,超链接的交互设计,并非只能这么简单。

W3C 的官方网站的超链接交互性不错,而且突破常规,下面我们来分析一下。下图是超链接交互性操作,当然推荐直接去W3C 官方网站看效果。

实现原理和分析

首先,仍然是常规的超链接样式,带一条下划线,但是与普通的超链接样式不同的是,这条下划线要粗(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 所以文本仍然是可见的。

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

这样就实现了下图效果

需要注意的是 a 元素是行间元素,直接对其使用 height 是没有作用的,但是对其加上 display:block 变成块元素,则会脱离文本,所以需要添加 inline-block 属性。但是这样,对于早期的 IE 浏览器兼容性不太好。

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

文:我爱水煮鱼

  • 相关推荐
  • 大家在看
  • 腾讯云服务器12.12限时秒杀-1核2G首年50元

    腾讯云服务器12.12多种机型限时抢购,1核2G服务器4.17元/月,2核4G服务器6.17元/月,专业技术7*24小时在线服务,腾讯云为企业和个人提供快捷,安全,稳定的云服务!

    广告
  • 大厂设计师总结的交互设计心得,新手必看!

    UI设计师的工作,并不单单只是输出设计方案,很多时候还会涉及到与团队的协作与交接等多个环节,在传统的交付环节中,需要设计师手动进行标注,既增多了低价值工作量,又容易出现开发和设计师对图稿理解不一致,而导致细节出错的情况。其实现在有不少工具能帮助设计师省掉这一步,例如Pixso可以自动完成标注相关的环节,选好一款软件,往往能起到事半功倍的效果。今天就给大家分享一下,有哪些便于协作、提升工作效果的UI设计软件?

  • Android 13为您提供多种材质动态主题样式

    在安卓12上,谷歌推出了自己的材质主题引擎(像素专属),它根据壁纸中的颜色在主屏幕、小部件、图标和菜单上应用不同的调色板...色调点、表现力和色彩主题选项(通过:Android Police)...例如,Spritz使用更柔和的单色色调,非常适合暗模式,而Expressive提供了更多的弹出颜色,仍然与背景图像中的核心颜色相匹配...

  • 官网修改措辞 英特尔ARC Alchemist独显或错过一季度发布窗口

    在重申了会在 2022 年 1 季度推出 ARC Alchemist 独显的计划几天后,英特尔竟又悄悄撤下了官网上任何与“一季度”有关的字句 —— 只剩下“2022 年”这个相当模糊且宽泛的时间窗口。虽然官方尚未回应独显产品线是否延期,但 Tom's Hardware 还是从多个方面展开了推测。(图 via Intel)首先,正如 VideoCardz 所注意到的,英特尔官网刚刚撤下了所有关于 ARC Alchemist 将于“2022 年 1 季度”到来的措辞。如果你现在刷新页面,会发

  • 学慧,你的专属互联学习官网

    北京学慧网络科技有限公司成立于2014年10月,经过多年的发展与积累,学慧网的150余位行业专家及优秀教师已完成90个项目1200项专业课程的研究,开发教研教辅资料6000余份,每年为学员提供超过1000万个学时的课程服务,完善的课程体系及遍布全国的学员服务中心,为不同地区的近40万名学员提供本地化的服务...学慧网于2015年开设直播课程,获得“互联网+品牌影响力在线教育机构”荣誉,2016年拥有自己的签约老师,荣获美国ACI国际研究中心高级授权、2017年荣获百度教育“2017年度特色职业教育品牌”、2020荣获“年度ISF十大健康教育机构”奖......荣誉,只是学慧网成长的一个一个标志,也是学慧网对每一位学员的保证,对社会付出的每一份努力...中和教育采用“一对一”督导模式,电话、QQ、微信、站内信等,班主任老师专人全方位跟进督导学习进度,对学员全方位分析,精准定位,找到快速提高学员学习成绩的通道,让学员迅速成长!...学慧网为用户提供完善的课程体系及教学服务,从用户开始咨询到报名、学习、报考、考试、成绩查询,直至领取证书完成整个服务流程...

  • Oppo Pad将支持33W快速充电,并获得3C认证

    Oppo一直忙于期待已久的Find N,以至于没有时间发布其首款平板电脑Oppo Pad。不过,正如3C最近的认证所证明的那样,slate发布的准备工作仍在进行中它表明Oppo Pad(OPD2101)将支持33W快速充电(11V,3A),但是,目前尚不清楚零售包装中是否包含此类充电器。它的表亲Realme Pad确实附带了一个充电器不过,Realme slate的功率只有18W。Oppo平板电脑将更大、更强大——传闻的规格包括Snapdragon 870(6/256 GB)、分辨率为2560 x 16

  • 凡客诚品否认官网关闭

    今日,针对“官网疑关闭”的传闻,凡客诚品客服表示,官网并未关闭,是系统升级,升级后打开原网页端会跳转至微信小程序,目前都是 通过APP以及小程序访问,可正常下单。此前,有媒体报道称,访问凡客诚品官方网站(vancl.com)后,直接跳转至有赞店铺,疑似已经关闭。

  • 超越所有折叠手机!曝荣耀Magic V已入:支持66W快充

    荣耀此前已经宣布,将很快推出首款折叠屏手机Magic V,该机还将搭载骁龙8 Gen 1处理器,将称为折叠屏手机中的最强性能旗舰。虽然目前官方还未正式公布发布会时间,但是荣耀Magic V已经非常接近上市的状态了,今天有消息称其已经通过了3C认证,其中显示该机将支持11VDC,6A MAX电源适配器,也就是说支持66W快充。这也侧面证实了此前相关爆料的真实性。据此前消息,荣耀Magic V将采用左右内折的方案,折叠式的大屏幕采用右上角单打孔

  • 男子苹果官网订购iPhone 13 Pro Max:半月后却收两包巧克力

    想必不少购买手机等电子产品的人,为了避免商品出现问题都会选择在官网或者旗舰店购买。但即使在官网购买,在运输环节也有可能出现问题。据外媒报道,来自英国西约克郡利兹市的男子丹尼尔卡罗尔 (Daniel Carroll),想购买一部iPhone 13 Pro Max作为自己的圣诞礼物,却不料苦苦等来的确实两包巧克力。根据卡罗尔的说法,他是在12月2日在苹果官网购买的iPhone 13 Pro Max,但由于没有库存,显示最早的发货日期是12月17日。在苦苦等了

  • 不了解智慧用水?海尔水联3大方案一户一设计

    水电线路不合理、产品选购跑断腿、装修风格不满意......说起来安装全屋水系统的麻烦还真不少,前期装修不合理,后期使用起来也是有苦说不出,那么你真的了解智慧的全屋水系统吗?12 月 26 日,海尔智家联合央视新闻在北京开启“智慧中国家·海尔新年盛典”直播活动。现场,海尔水联网从两个方面为用户详细讲解了智慧用水:一是专业的一站式服务,让用户享受到一户一设计专属便捷的装修体验;二是完善的三大全屋用水场景方案,为用?

  • 任天堂发现高仿官网:“最强法务部”再次出山!

    近日,任天堂官方发布声明,称发现了一个仿冒任天堂官网的山寨网站,并告知用户购买产品时注意鉴别真伪。据悉,该高仿网站在界面上与任天堂官网相似度极高,并有着任天堂的logo,且在低价售卖NS等任天堂旗下产品和游戏,极易导致用户混淆。对此,任天堂表示,用户在此类山寨网站购买产品,不仅有遇到诈骗的可能,更是会造成用户个人信息的风险,因此建议用户注意辨别,不要在此类网站购买产品。同时,任天堂也宣布,目前已经向警方

这篇文章对你有价值吗?

  • 热门标签

热文

  • 3 天
  • 7天