我的博客上的图片有点多了，这肯定增加了Http请求，无疑会拖慢显示速度，知道Css Sprites两年多了，始终不会使用啊，前两天无意中看到了一篇介绍，代码都贴出来了，反复的实验，终于被我给搞成功了，哈哈对于代码盲来说是非常痛苦的事情，目前能做到只是把侧边栏里的Feed图标等做了优化，也就是5张小图标合成一张图片来显示，这样以前5次Http请求现在变成了1次，当然了一张图片肯定是要大一些的，没办法啊，下面把本人的实践贴出来：
1、图片合成:首先是把小图片合成一张大图片，博客右侧的图标共5个，每张44*44，所以大图做出来是224*44的，宽度上图标和图标之间加了1px的距离，大图是背景透明的PNG格式。
2、背景定位：Css Sprites就是可以通过一张大图显示出每个小图标，这就要求定位好每个小图标的位置，定位不好图标就无法显示或者是链接和图片错开了，定位呢我下载了CSS森林的Css Sprites样式生成工具，非常好用，不但可以定位图标，还可以生成Css 样式呢，使用方法可以参考他的帮助，也可以给我留言。
3、放置代码：准备工作做好了，然后就要放入代码了，直接放置上边软件生成的代码是不行的，最少我这里不行，我是用W3school在线测试工具反复测试才生成了代码的，你也可以先测试好再添加代码，我是这样做的：
A. 打开修改HTTP，勾选扩展窗口小部件（做好备份），查找代码
]]></b:skin><!--
/* 基本定义 */
#Misc ul{
padding:0px 0 5px;
list-style-type: none;
}
#Misc li{
width:43px;
height:55px;
float:left;
margin-left:12px;
display:inline;
}
/* 定义Feed图标集链接a的样式 */
#Misc li a {
text-decoration: none;
background-image:url('https://mifia.qiniudn.com/feed.png');
background-repeat: no-repeat;
width: 44px;
height: 44px;
display: block;
}
/* 隐藏链接文字 */
#Misc li a span{
display: none;
}
/* 通过调整背景大图的位置定义每个图标链接a的样式 */
#f-a {background-position: -0px 0;}
#f-b {background-position: -45px 0;}
#f-c {background-position: -90px; 0}
#f-d {background-position: -135px; 0}
#f-e {background-position: -180px; 0}
--><div id='Misc'>
<ul>
<li><a href='http://feeds2.feedburner.com/mifia' id='f-a' target='_blank' title='Subscribe me on feedburner'><span>Feedburner</span></a></li>
<li><a href='http://feed.mifia.com.cn/' id='f-b' target='_blank' title='Subscribe me on feedsky'><span>Feedsky</span></a></li>
<li><a href='http://t.qq.com/mifia1980/' id='f-c' target='_blank' title='Follow my Tencent microblogging '><span>Tencent microblogging</span></a></li>
<li><a href='http://www.google.com/reader/shared/04745602405300583246' id='f-d' target='_blank' title='My Google Reader Share'><span>Google Reader</span></a></li>
<li><a href='http://friendfeed.com/mifia' id='f-e' target='_blank' title='Subscribe My Friendfeed'><span>Friendfeed</span></a></li>
</ul></div>