今天总结下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精灵”。
看了博主的写的东西真的受益匪浅啊。以后还要常来看看。
希望常来
呵呵,博主的文,写的总是那么好。
感谢分享如此好的文章。
似乎在哪里见过 博主ID
呵呵,我的网名哦
嘿嘿,我又来了
期待博主更多的分享
多交流交流
好东西。
留个名证明我来过