div+css+js 想问一下,下面那张图的效果,可以用div+css样式实现吗?
发布网友
发布时间:2022-05-18 09:42
我来回答
共1个回答
热心网友
时间:2022-05-18 11:12
可以啊,你需要准备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
属性你也可以去看看,让你的截图更方便,不用重复的引用同一张图片。这里这样写让你更好熟练运用