具体的例子，可以看 http://www.mp3.com 曾经在 AListApart 上看到过类似的文章，因为作者写得很烦琐（可能因为涉及到别的知识点），当时只是简单浏览了一下，获取的唯一信息就是通过一张图片实现翻转图像效果，之后也没有怎么去尝试，不了了之。昨天翻译那篇下拉菜单的文章之后，想到这个，于是自我尝试并实现，现在说说我的制作过程。 首先建立如下的菜单结构： 代码: <ul> <li><a href="#">Home</a></li> <li><a href="about.htm">About</a></li> <li><a href="services.htm">Services</a></li> <li><a href="contactus.htm">Contact Us</a></li> </ul> 对其进行一些样式定义： 代码: ul { margin: 0px; padding: 0px; width: 184px; list-style: none; } 现在要对其进行连接样式定义，使用的背景图片如下： screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='在新窗口浏览图像';}" onmouseover="if(this.resized) this.style.cursor='hand';" onclick="if(this.resized) {window.open('http://www.mp3.com/style/1/images/site/localnav_btn.gif');}" /> 图片上总共有八种样式，我们只是用其中的四种。 先统一定义 a ： 代码: ul li a { display: block; text-decoration: none; color: #444; padding: 0px 0px 0px 28px; font-size: 12px; line-height: 23px; height: 23px; } 定义 display 为 “block” 的原因和昨天的例子一样，是为了让链接占据整个 li 的空间。因为左边有修饰，所以填充 28px 。定义行高和块高度均为 23px ，正好是图片上每种样式的高度，同时，这个是为了让文字垂直居中对齐。 现在分别定义四种链接状态，记住它们的顺序 love & hate （爱恨规律）： 代码: ul li a:link { background: url(localnav_btn.gif) no-repeat 0px 0px; } ul li a:visited { background: url(localnav_btn.gif) no-repeat 0px -69px; } ul li a:hover { background: url(localnav_btn.gif) no-repeat 0px -92px; } ul li a:active { background: url(localnav_btn.gif) no-repeat 0px -23px; } 这里需要注意的是，网页中的定位都是将有上角设置为原点，所以 Y 通常都是负值，上面 background 也可以明确写作 background-image，0px 0px 表示该样式定义的原点与背景图片的 0px 0px 点重合，其它类似。这样就运用了图片的四个不同的部分来作为四种链接状态的背景图片。 至此，这个效果的介绍基本完成，需要说明的是，我是在 Firefox 1.0 / Win 和 IE 6 / Win 下面测试的，没什么问题。不过 IE 5 据说是很难对付的一款浏览器，效果如何我就不知道，如果出现什么问题，请告诉我。 还需要说明的是， Mozilla 和 IE 对待链接的四种状态的处理是不一样的。第一个链接，我写的是 # ，IE 种默认为当前页，所以处于已经访问过的状态，所以背景同其它三个不同，但是在 Firefox 下面却是一样的，另外 active 状态的，就比较难体现出来了。所以很多时候我们定义链接样式，只定义两种 a 和 a:hover 。
完整代码如下： HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>翻转图片菜单</title> <style type="text/css"> <!-- ul { margin: 0px; padding: 0px; width: 184px; list-style: none; } ul li a { display: block; text-decoration: none; color: #444; padding: 0px 0px 0px 28px; font-size: 12px; line-height: 23px; height: 23px; } ul li a:link { background: url(localnav_btn.gif) no-repeat 0px 0px; } ul li a:visited { background: url(localnav_btn.gif) no-repeat 0px -69px; } ul li a:hover { background: url(localnav_btn.gif) no-repeat 0px -92px; } ul li a:active { background: url(localnav_btn.gif) no-repeat 0px -23px; } --> </style> </head> <body> <ul> <li><a href="#">Home</a></li> <li><a href="about.htm">About</a></li> <li><a href="services.htm">Services</a></li> <li><a href="contactus.htm">Contact Us</a></li> </ul> </body> </html>