作家
登录

用图片实现超级链接的个性化下划线

作者: 来源:www.28hudong.com 2012-11-19 14:33:36 阅读 我要评论

如果某种你看到图片中的下划线链接请不要惊讶。因为它其实很简单,你也可以做到。来这里看看实际效果 http://5key.net/demo/hyperlink-underline 首先,我们来说说这个彩色的下划线是怎么弄的。也许你已经猜到了,一张渐变的背景图片。没错!就是下面这张图片。 再看看下面的css,整个链接的变化效果我想你应该已经明白了吧。如果不是太清楚。先来了解一下滑动门的概念 body {font-size:14px;font-family: Helvetica, sans-serif;padding:10px;margin:0px;}h1{margin:0; padding:0; font-size:16px; }p{padding:20px 0 0 0;}a{*padding-bottom:1px;text-decoration:none;}a:link{color:#06F;background: url(1.gif);background-repeat: repeat-x;background-position: 0 16px;}a:visited{color:#06f;background-image: url(1.gif);background-repeat: repeat-x;background-position: 0 16px;}a:hover{color:#039;background:url(1.gif) repeat-x 0 bottom;}

  推荐阅读

  设计体验:按钮上的内容

最近 UCDChina 以“注意界面上的文字”为主题写了一系列的文章,使我在界面文字上的使用受益匪浅。之后,我对按钮上的内容的表现也做了一些总结与分析,与大家分享并希望得到指正。 1. 不必区分按钮>>>详细阅读


本文标题:用图片实现超级链接的个性化下划线

地址:http://www.17bianji.com/kaifa/yejie/16377.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)