实际上在上一节中有关XP,风格按钮的设计,就已经是换的链接技术,通过三张图片的切换,完成按钮状态的切换。而在本节中所要讨论的也是类似的技术,不过在本节中我们将结合前面几章中都有的一些技术,包含链接对象的状态样式、[图片替代文本来及定位帮助我们实现一个目前所面临的问题。
也许在网站开发过程中会遇到一个类似的情况:天津网站建设,天津网站制作,天津网络公司,在我们的网站上,我们曾设计了一个链接,提示用户点击该按钮将访问W3C进行页面的代码校验。而在网站完成后,发现如果我们使用一个图片链接,似乎能够对这个功能更好的体现。而网站已经上线,不希望将链接改为图片。而且需要图片能够具有一定的交互状态。这种情况下,我们使用几种技术结合起来,实现样式改进。先来看一下原始的代码状态。
目前的链接状态也许并没有什么不好,但是也许使用图片链接的话会比现在更合适呢?看看样式表如何结合上面的内容完成这样的设计。第一步就是让按钮图片显现出来,并去掉目前显示的文字
一段代码帮助我们设定了链接的宽高,并使文字缩进到左侧不显示的位置中。下一步,就需要用前面的背景定位技术,针对每一个状态下显示背景不同的位置了。在制作好的Val,g中,已经把标准,悬停、按下3种状态放置在上面,一步需要做的就是改变其在对象中最终的显示位置只需要使用background-positi叫就可以,.不需要别的任侄何设置。非常简单,对于active状态下也是一样的操作:
最初的代码中并没有添加acdw状态,在这里我们新加了a3yva1:acfive,并使图像继上位移了一定像素。预览效果,目的达到。结合了背景定位、图片替换、链接状态,实现了我们的想法,在实际网站设计中如畏有类似的情况发生,也可以通过CSS单方面的修改来完成这样一些改进。使用图片替抉超技术硝丕有另一个好处,就是让搜索引擎继续吃掉这个字符。如果直接在页面中放置图片,搜索爬虫是不会智能的去识别图片上的文字从而把这个文字转为关键字进行分析的。/O使用凰虱片片替换技术的话,对搜索引擎爬虫来说样式与他是无关的,他只关注页面中拥有什么,搜索弓|攀甚至希望页面全是文字最好。当链接中还是放置着原封不同的文本时,搜索引擎爬虫会继续吃掉这个字符进行分析,不会对网站有任何影响,间接帮助网站提升了代码的友好。