背景图片模拟复选框的扩展问题

一般我们用两张背景图片来模拟复选框的 未选中 和 选中 两种状态，为了减少HTTP请求的次数，我们会用所谓Css Sprite技术，将以上两张图片和页面中的其他背景图片合并到一起，为了减小图片的大小，我们会尽量将背景图片合并的紧凑一些。开始我们的代码是：

1 <!doctype html>
2  <head>
3  <meta charset="gbk">
4  <title>Analog Multi Check</title>
 5 </head>
 6 <body>
 7 <style>
 8 * {margin: 0; padding: 0;}
 9 #box {margin: 100px;}
10 #box a {padding-left:18px; text-decoration: none; background: url(sprite.png) no-repeat 0 -1471px;}
11 #box a:hover {text-decoration: underline; color: red;}
12 </style>
13
14 <div id="box">
15 <a href="#">鞋子</a>
16 </div>
17 </body>
18 </html>

posted on 2011-05-08 21:28  ipaper  阅读(128)  评论(0)    收藏  举报

导航