X
100px的图片合成
100
X
200
的。通过CSS图片定位来达到切换效果。存放在根目录
img\tupian.gif
<style>
#div_1{width:100pxheight:100pxmargin:0padding:0}
定义一个DIV方框
#div_1
ul,li{list-style:nonemargin:0pxpadding:0px}
定义div_1中UL,LI
#div_1
li{float:leftmargin:0}
#div_1
a{
background:url(img/tupian.gif)
no-repeatwidth:100pxheight:100pxdisplay:block
}
定div_1中链接背景样式等
#a1
a:hover,#a1
a:active{
background-position:
0px
-100pxheight:100px
}
定义一个鼠标悬停状态
</style>
在BODY中
<div
id="div_1"><ul>
<li><a
href="#">首页</a></li>
CSS能更换的图片,只能存在于样式中。所以,这个图片也只能是背景图片。
一般是结合:hover来实现的。例如:
.mydiv{
background:图片1 no-repeat
height:100px
widht:100px
}
.mydiv:hover{
background:图片2 no-repeat
}
这样就实现了图片1和图片2的鼠标移上去的切换。
CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。