csssprite css解析gif文件 使用csssprite

很早之前发现w3cschool使用的是这用css解析gif文件 很多小图标全放到一个gif文件这样可以减少http请求次数,提高响应速度

现在自己也能轻松搞定了

<!--http://cn.spritegen.website-performance.org/ 合成图片 css解析gif文件   
		要求test.gif和该文件放在同一目录下-->
<style type="text/css">
.sprite-accept{  background: url(test.gif); background-position: 0 0; width: 16px; height: 16px; } 
.sprite-resultset_first{background: url(test.gif); background-position: -66px 0; width: 16px; height: 16px; } 
.sprite-resultset_last{ background: url(test.gif);background-position: -132px 0; width: 16px; height: 16px; } 
.sprite-resultset_next{ background: url(test.gif);background-position: -198px 0; width: 16px; height: 16px; } 
.sprite-resultset_previous{ background: url(test.gif);background-position: -264px 0; width: 16px; height: 16px; } 
</style>
获取第一个图标：<div class="sprite-accept"></div>
获取最后一个图标：<div class="sprite-resultset_previous">

test.gif文件在左侧