CSS如何制作一张图片多种状态的图象翻转菜单？_Div+CSS教程

　　
　　根据页面设计的需要，有时候我们使用图象翻转菜单，所谓图象翻转菜单是指在链接状态、鼠标激活状态实现不同的图片效果。
　　在通常的图象翻转菜单制作中，会出现闪烁的情况，这是因为图片载入延时所造成的，也就是图象还未完全加载没能完全显示，加载时间的间隔就会出现闪烁的现象。
　　我们今天所要讨论的是将图象翻转菜单的多种状态制作成一张图片，我们应用css对背景图片的位置进行控制，进而实现一张图片多种状态的图象翻转菜单效果。

　　这张图片从上至下结合了三个不同的状态，链接样式，激活样式，当前页样式。
　　来看下面的css代码：


　　我们来看下面的xhtml代码：


　　#nav li声明了图象按钮区域的宽高，去掉了列表标记，并且设置右边距两个象素，溢出部分直接隐藏。

　　#nav li a同样声明了宽与高，溢出部分直接隐藏。设置了内边距，距离顶部50px，这一设置有什么作用呢？我们需要考虑一种情况的发生，假如用户在浏览网页的时间，由于网速等原因没有能加载css文件，那用户根本没有办法点击链接，因为链接的定义全部写在css文件中，我们除了应用图片区域块的无序列表的链接，还应该加上文字链接，这样就不必担心没有CSS文件无法访问。同时也有利于SEO，让搜索引擎更轻易的抓取网站上的内容。文字链接是不能与图片区域重合的，这样就会发生重叠影响美观，我们设置距离顶部50px，文字已经位于图象区域以外，并且设置了溢出部分直接隐藏。在正常情况下是看不到文字链接的。在下面的运行效果中，你可以去掉CSS样式定义看看实际效果。

　　#nav li a.an　声明了名称为an的类的背景图片，不重复，位置是距顶距左均为0.
　　#nav li a:hover　声明了激活时背景图片的位置，距顶部-43px；也就实现了图片中间位置那一按钮的效果。
　　#nav li a.dang 声明了当前页图片的位置，距顶部-86px；也就实现了图片最下面位置那一按钮的效果。这三个CSS代码中，最重要的就是background-position属性，关于background-position的说明，请点击这里。

　　细心的你一定注重到在无序列表的第一个链接中，我们使用了class="an dang"，这是一种非凡的声明方式，大家在实际使用中可以灵活的应用，这一声明表示，这一链接，使用an与dang双重效果。
　　请您非凡注重：class="an dang"的结合运用效果，就实现了当前页指引，我们不需要修改任何样式与图片，只需要在当前栏目的 class="an"更改为class="an dang"即可。

　　罗嗦了这么多，我们来看下面的运行效果：