闲暇时感到无聊...
做了个图片轮换!.不想用javascript,所以没办法自动轮换!.
测试页面: www.alwaysthere.com.cn/Test/csscd/1.html
源代码:
| <html> <style> a,div,img {border:0px;margin:2px;} a{position:relative;display:block;width:100px;height:20px;} a.a1 div{position:absolute;left:157px;top:7px;width:600px;height:400px;background:url(1.jpg)}; a.a1:hover {display:block;background-color:#666} a.a1:hover div{display:block;position:absolute;left:157px;top:7px;width:600px;height:400px;background:url(1.jpg)} a.a2:hover {display:block;background-color:#666} a.a2:hover div{position:absolute;left:157px;top:-97px;width:600px;height:400px;background:url(2.jpg);} a.a3:hover {display:block;background-color:#666} a.a3:hover div{position:absolute;left:157px;top:-201px;width:600px;height:400px;background:url(3.jpg)} a.a4:hover {display:block;background-color:#666} a.a4:hover div{position:absolute;left:157px;top:-305px;width:600px;height:400px;background:url(4.jpg)} </style> <body> <a href="#" class="a1"><img src="1.jpg" width="150" height="100" /><div></div></a> <a href="#" class="a2"><img src="2.jpg" width="150" height="100" /><div></div></a> <a href="#" class="a3"><img src="3.jpg" width="150" height="100" /><div></div></a> <a href="#" class="a4"><img src="4.jpg" width="150" height="100" /><div></div></a> </body> </html> |