CSS中关于超链接一些特殊的情况

今天总结下CSS链接相关的知识:第一个,基础,A:hover可以定义鼠标悬停的时候,显示的样式,但是最好同时加上a:focus,这样,再通过键盘到达的时候,会显示一样的样式效果。

让下划线更与众不同:因为下划线会使页面看上去比较乱,所以一般设计者都会用粗体代替下划线。但是有两个思路比较好,或许会让你茅塞顿开哦。

第一个思路是使用虚线,而当激活的时候,将这条线变成实线,从而想用户提供视觉反馈。

第二个思路是使用动态的下划线,有没有试过对a:hover,a:active等使用背景,如果你使用一个非常棒的背景,这会大大的与众不同,比如一个逐渐向前动画,会产生一种非常棒的脉冲效果。这个技术也可以用在a:visited的上面,比如加一个已访问的小图标,可以防止用户“回溯”浪费用户时间。

注意,在IE中,并不支持背景动画效果,好在他会显示动画的第一帧,不会出现没背景的情况。

下面要说的是突出显示不同类型的链接:有个链接是新窗口打开的,有的链接是原窗口打开的,对于用户来讲,这一点会降低体验,因为他们不能预先知道要去哪里,尤其是网站比较乱的时候。另外新窗口无法使用退后按钮。

较好的解决方案是让新窗口链接看起来不太一样。比如给所有的新窗口链接右上角加个向外的小图标。实现的时候,给右侧加一个内边距,让背景小图片显示出来

这个方法很有效,但是实现起来比较难,因为你要检查每一个链接 对没一个新窗口链接加上代码。其实可以使用CSS属性选择器,让所有具有 target=”_blank”的链接产生这样的样式,关于CSS属性选择器的内容可以上网查查,朱宝祥就不说了。

 

最后要说的是CSS背景图像的问题,就是所谓的“图像翻转”技术。

简单来说,其实和前面差不多,只不过是对a的几个伪类设置不不同的背景图像,我在这里不说怎么设置了。主要说下图像延迟的问题:

首先,设置背景图像的问题在于浏览器第一次加载鼠标悬停图像时,有短暂的延迟,这会造成视觉上的闪烁,让人感觉按钮反应有点慢。

方案一,可以将鼠标悬停的图像应用于父元素,从而预先加载。

方案二,使用一个图像,将几种效果放在一张图像上面,分别设置link,visited,active不同的对齐方式。只可惜即使是这样IE也会请求服务器重新加载,有一定的延迟,这会有点轻微的闪烁,这有点烦人,为了避免闪烁,可以将翻转状态应用于链接的父元素,这样在图像加载时,它会消失一段时间,但是会露出相同的图像,消除了闪烁。消除闪烁的另外一种方式使用IE专用的CSS文件包含以下代码,启动背景缓存,实现预加载。

Html {

Filter:expression(document.execCommand(“backgroundImageCache”,false,true));

}

深入:重新回顾方案二,既然可以将几个效果放在一张图片上,为什么不将所有的图片都放在一张照片上呢,这样可以显著提升服务器性能啊,我查了查,发现是可以的,原来很多大型网站都已经使用这样的技术了,叫“CSS精灵”。

 

原文链接:,转发请注明来源!

发表评论