Question

div+css+js 想问一下，下面那张图的效果，可以用div+css样式实现吗？

li 鼠标移上去切换，但是每个li的背景，又不一样！！！

Answer 1

可以啊,你需要准备2张图就可以了，一张就是你的这个整个没变之前的黑色图，还有个就是整个变了的图有点灰色的。
此前你要写好每个li的高宽 这里比如说是 height:33px;width:22px
然后 打个比方你为每个li 设置一个class值 比如class="a" class="a2" 。。。。

然后 .a a{background: url(../这里是你的第一个黑色的导航背景图) 0 0 no-repeat}
.a2 a{background: url(../这里是你的第一个黑色的导航背景图) -22px 0 no-repeat} 走x轴坐标，这里的意思你可以这样理解 减去 你的前面背景图的width像素，如果后面是a3 那么就是-44
同理a:hove也可以这样写 用 第2张的灰色的背景图

还有个background-position 属性你也可以去看看，让你的截图更方便，不用重复的引用同一张图片。这里这样写让你更好熟练运用

Answer 2

可以，建议你去http://www.w3cfuns.com/portal.php?mod=topic&topicid=13看一下，相信你会有收获，里面会教你一些div+css的基础，还会教你制作导航条。

Answer 3

可以用整张背景图的不同部分作为LI的背景来实现
修改css里的background-position属性和宽高来截取背景部分

Answer 4

可以，背景图切两种样式的各一张，然后利用background-position来控制背景图的切换。