当前位置:编程学习 > html/css >>

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

li 鼠标移上去切换,但是每个li的背景,又不一样!!!
答案:可以啊,你需要准备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 属性你也可以去看看,让你的截图更方便,不用重复的引用同一张图片。这里这样写让你更好熟练运用
其他:可以用整张背景图的不同部分作为LI的背景来实现
修改css里的background-position属性和宽高来截取背景部分 可以,建议你去http://www.w3cfuns.com/portal.php?mod=topic&topicid=13看一下,相信你会有收获,里面会教你一些div+css的基础,还会教你制作导航条。 可以,背景图切两种样式的各一张,然后利用background-position来控制背景图的切换。 

上一个:哪里可以下载css,html的教程
下一个:这段css代码是什么意思?请大侠们帮忙解释解释·~!!!

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,