首页 > 经验 > 关键词 > 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 浏览器兼容性不太好。

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

文:我爱水煮鱼

  • 相关推荐
  • 大家在看
  • 站长之家诚聘:SEO高手、资深网页设计师、JAVA/GO/PHP/.NET工程师

    2020年站长之家开启新一波人员招募,欢迎小伙伴加盟。本次的首推职位有资深SEO高手、资深网页设计师、JAVA/GO/PHP/.NET程序员,欢迎大家投递简历到hr@chinaz.com邮箱(务必附作品、工作经历、工作成绩等)。SEO高手(若干人)职责描述:1、负责站长之家网站的搜索引擎优化方案设计,提高网站流量、收录和排名;2、负责监控和调研搜索引擎数据与规则,调研竞争对手及其他网站相关策略,制定并实施应对和优化方案;3、负责对SEO相关数据进

  • HTC折叠屏智能机设计专利曝光

    ​在规划 5G 智能机产品线的同时,HTC 似乎也在酝酿折叠屏的选项。荷兰科技博客 LetsGoDigital 报道称:2019 年底的时候,该公司在美国申请了一项“可折叠显示设备”的专利申请,并于 2020 年 8 月 20 日正式被世界知识产权组织(WIPO)的数据库所收录。与市面上的同类产品一样,得益于可半开或摊平的灵活铰链设计,该机也能够在智能机 / 平板电脑模式之间进行变换。

  • 官方自曝!Mate 40 RS保时捷设计稳了 :支持测温

    10月22日晚8点,华为新旗舰Mate 40系列将正式全球发布,余承东也亲自预热,称这是史上最强大的Mate系列手机。据悉,Mate 40系列本次将提供Mate 40、Mate 40 Pro、Mate 40 Pro+、Mate 40保时捷

  • 网站导航:7个最佳实践,设计技巧和警示

    一些小的事物可以创造大的变化,网站导航栏就是一个很好的例子。导航的结构和标签可能会对结果产生巨大影响

  • 如何设计抖音主页头图 抖音背景图怎么设计

    抖音主页头图要怎么设计会比较好看,让人留下比较深的印象呢,背景图的设计思路以及主要考虑的因素有哪些。下面我们会通过几个要点来介绍下,抖音背景图的设计注意要点,大家在抖音设计自己的头图时可以参考下。1、KOL出镜,也就是自己抖音视频里的主角出现在头图背景图里面,让他/她成为标志性IP,记得要使用好看的高清形象照,不用其他过多文字或其他修饰就能引流2、在头图里面,再次自我介绍,完成对账号的简介的补充说明,或者

  • 如何设计抖音LOGO头像 抖音logo怎么设计好看

    抖音账号的头像LOGO要怎么设计比较好看,又符合自己账号的定位属性,什么头像可以让别人一眼看了之后留下深刻印象呢,这里我们来一起了解下如何设计好一个抖音的logo头像。

  • 如约而至!科勒精选·设计中国北京设计论坛即将开幕

    亚洲高端设计大展“设计中国北京” 2020 将与全球厨卫领导品牌科勒KOHLER再度合作,邀请来自国内外顶尖的设计大师,以“以设计之道复兴世界”为主题开展为期 4 天的科勒精选·设计中国北京设计论坛。其中,展会首日 9 月 23 日下午,科勒精选还将倾情呈献“幸福的多维空间”专场主题论坛。2020 年注定是不平凡的一年,第三届“设计中国北京”( 9 月 23 日 –9 月 26 日)重磅回归,旨在凝聚全球设计的力量,以前瞻思想深入探讨“后?

  • 科勒再度携手设计中国北京,以设计凝聚幸福点滴

    2020 年 9 月 23 日 –9 月 26 日,亚洲高端设计大展“设计中国北京” 2020 即将隆重举行,全球厨卫领导品牌科勒KOHLER作为论坛的冠名赞助商,再度携手“设计中国北京”,带来为期 4 天的科勒精选·设计中国北京 设计论坛。本届论坛汇聚来自国内外 30 余位顶尖设计师的前瞻思想,将以“以设计之道复兴世界”为主题展开探讨。展会首日 9 月 23 日下午,科勒精选还将倾情呈献“幸福的多维空间”专场主题论坛。在设计中感知幸福生活在

  • 三星Galaxy S21获得3C认证:骁龙875+25W快充

    【TechWeb】根据此前官方公布的消息,高通将于12月1日发布全新的年度旗舰处理器骁龙875,而按照以往惯例,三星全新的Galaxy S21系列旗舰将有望于明年1月全球首发这款处理器。虽然还有差不多3个月的时间,但目前关于该机的爆料已经十分密集。现在有最新消息 ,近日有媒体发现该机已获得3C认证。根据数码博主最新发布的消息显示,一款型号为SM-G9910的三星新机近日已获得3C认证,根据此前曝光的消息,这款机型不出意外的话正是曝光依

  • 三星Galaxy S21全系通过3C认证:标配25W电源适配器

    按照以往惯例,三星全新的Galaxy S21系列旗舰将有望于明年1月全球首发这款处理器。虽然还有差不多3个月的时间,但目前关于该机的爆料已经十分密集。现在有最新消息,近日有媒体发现,继Galaxy S21之后,又有两个型号的机型也获得了3C认证,不出意外的话就是Galaxy S21+和S21 Ultra了。根据数码博主最新发布的消息显示,继此前一款名为sm-g 9910的三星5G数字手机通过国家3C认证后,近日型号分别为sm-g 9960和sm-g 9980的

  • 这家平面设计网站月入5万,收费模式有点特别

    ​Draftss是一个为客户提供产品图形设计和前端代码服务的平台。与其它类似的设计平台不同的是,Draftss采取了订阅付费的模式,而不是按照根据项目评估价格。其中图形设计订阅费用为 89 美元/周;前端代码服务订阅费用  169 美元/周。

  • 官方晒Mate 40外形轮廓图:背部摄像头全新设计、橙色按键惹眼

    iPhone 12终于登场,而接下来大家要期待的重磅新机就是Mate 40了。就在刚刚,华为消费者业务产品线总裁何刚就晒出了Mate 40的宣传海报,其中这款大家异常期待重磅新机的轮廓图被展示出来。从

  • 上直播联手稿定设计,共同推进视频直播+在线设计服务的融合之道

    近日,上直播与稿定设计达成战略合作,双方将持续探索企业视频直播与商业设计领域的跨界融合,为双方的使用受众提供更多元化的视频直播和在线设计领域的使用体验,共同推动视频直播和在线设计的融合发展。上直播是国内知名的企业直播服务商,旨在为企业提供从视频内容生产、内容运营、大数据精准营销于一体的完整营销闭环服务,衍生了教育培训、医疗、金融、企业内训、汽车、房产、互联网等众多行业的企业视频直播解决方案,当前已

  • 在线制图工具哪家强?国内知名设计网站大比拼

    对新媒体人来说,一张好的文章配图必定要掏空心思,为了制作出能让领导满意的配图,加班熬夜修修改改都是常事,这里总结了几家业内人士都在用的在线制图工具,总有一款适合你哦!1.稿定设计相信很多新媒体人都用过稿定设计,内含丰富的模板场景,站内的图片和字体都有正版授权,只要你充值VIP会员,即可下载使用。2.丐帮设计这是一款囊括了平面设计、视频制作、H5 制作、电子相册制作等综合性质的在线设计工具平台。无论你是新媒体

  • 从濒临破产到价值4亿美元,这个无代码网站设计平台经历了什么?

    很多初创公司都会试图构建自己的网站或者开发平台,而在没有预算和专业网站开发人员的情况下,无代码开发平台和工具成为了很好的选择。

  • HONOR TALENTS荣耀全球设计大赛上海艺术沙龙 畅谈设计美学“理想国”

    自 9 月 4 日上线以来,HONOR TALENTS荣耀全球设计大赛吸引了全球设计师、知名高校设计高材生的关注和投稿。线下,荣耀也与设计爱好者们积极互动交流,在上海时代广场连卡佛搭建了一个的交流平台,邀请青年设计师周桐及花粉一起在现场创作和分享精美创意作品,畅谈设计美学“理想国”。畅谈创意本源弘扬传统文化周桐,连卡佛 2020 创意集结号涌现出来的设计才子,作为中央美术学院设计院的青年设计师,其主攻媒体艺术研究方向,近?

  • vivo IFEA 分离式镜头设计荣获2020红点设计概念大奖

    2020 年 10 月 9 日,深圳 —— 享誉全球的设计界“奥斯卡”德国红点奖于线上颁奖典礼中官宣获奖名单。vivo工业设计团队凭借vivo IFEA(Interest Free Explore Amazing)分离式镜头设计,在来自 52 个国家的 4170 件作品中脱颖而出,荣获红点设计概念奖,彰显其卓越产品设计和领先创新科技。对vivo而言,成为近三年为数不多斩获红点奖的中国手机品牌,意义非凡。红点设计概念奖证书vivo IFEA分离式镜头设计示意图 德国红点奖始于 19

  • 阿里给原创设计师找“钱” 联手中华设计奖为创意孵化牵线搭桥

    原创设计如何快速变现?商家又如何找到符合自己风格的原创设计,并在卖成爆款后不被抄袭?在9月25日的第三届中华设计奖颁奖仪式上,阿里巴巴集团知识产权保护高级总监徐骏提出了包括“一键备案确权”、“智能精准授权”、“抄袭快速维权”等在内的原创保护三权服务体系,用创新技术去保护商业创新,打通原创设计供应链和产销链,保护整个行业不受抄袭困扰,建立良币驱除劣币的可持续循环机制。与赛事合作促进原创设计商业孵化本届中华设计?

  • 丐帮设计:职场人升职加薪必备神器

    随着自媒体、短视频等行业的兴起,人们对作图的需求也越来越多,尤其在职场中,互联网公司、广告公司、旅游公司的小哥哥小姐姐们常常会接到老板作图的任务,对于不懂设计的小白来说,简直令人头秃。为了解决用户作图需求这一痛点,各类图片编辑工具应运而生,丐帮设计就是其中十分优秀的一款。丐帮设计的用户群体十分广泛,无论你是做新媒体运营、产品运营、淘宝商家,还是教师、HR、销售商家,在丐帮设计都能找到你想要的模板!丐

  • 代理分销制度6个设计思路

    因为最近在做一个新的社交电商平台,所以一直忙着做平台分佣的顶层制度设计。说实话,以前我从来都没有一次认真的参与到平台分佣制度的设计中去,我主要是负责平台上线之后的运营和玩法的。

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签