一、把小图放在一张大图中，先排版好。上几张图看看，就比如这个：
谷歌：
淘宝：
土豆右下角悬浮框：
1、把用到的小图都放到了一张大图里，其中的小图之间的排版是有点规律的，比如说淘宝那张，类似的小图放置成同一列，这样就计算小图显示位置的时候，只要知道第一个小图的位置，同一列的小图，left（X坐标）一样，只需要改top（Y坐标）。这样就方便了许多。
二、使用大图。
在哪个位置需要使用这个小图，就把大图作为background-images插入。然后来根据这个小图的大小调整left 和top。
用到的css属性是background-image、background-position、background-repeat、这几个属性。
或者使用background这个复合属性写在一起就好。
三、我的第一个demo，我一定要实现这样的效果
我先上张图说明我要做什么:
这个例子的意义是让我明白要怎么去显示想要的小图，没有其他的意义了哈哈。
我的思路是，ul li内内嵌一个<div></div>（当然li是块级元素）。
详细的布局代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul.ul1
{
width:200px;
height:200px; }
ul.ul1 li
{
height:40px; }
.star
{
width:30px;
height:18px;
border:1px solid black;
display:inline-block; /*将对象呈递为内联对象，但是对象的内容作为块对象呈递*/ /*这里使用是为了div跟li能不使用float属性处在同一行，最后div和li对其是用到inline-block属性*/
vertical-align:top; background-image:url(images/minibar.png); /*显示小图*/
background-repeat:none;
background-position:2px -55px;
}
.num9
{
width:30px;
height:18px;
border:1px solid black;
display:inline-block;
vertical-align:top; background-image:url(images/minibar.png); /*显示小图*/
background-repeat:none;
background-position:-205px -20px;
}
</style>
</head>
<body>
<ul class="ul1">
<li>项目一<div class="star"></div></li>
<li>项目一<div class="num9"></div></li>
<li>项目一</li>
<li>项目一</li>
</ul>
</body>
</html>
小图完整出来了。
心得：
1、书写background-position时一般都是负值，因为是从大图的左上角作为（0,0）点。
2、之前没有学习css sprite之前，是想着怎么把一张大图不要的部分怎么遮挡掉。现在明白了是怎么回事。比如我上面要显示那朵小云，把大图放进div中，然后设置这个div的width和height，再定位一下background-position的位置。最后，大图就只在div中显示我们需要的一小部分。
3、我还要深入学习要怎么把小图排版好成一个大图，更容易测量位置，且不互相干扰。
三、为什么要使用CSS Sprites
减少HTTP请求次数，从而提高了网站性能。
因为假设有6个小图，就有6个HTTP请求，但是如果是放在一个大图里，就只需要1次，因为你要的6个小图都在一张大图里，请求一次后不用再次发送HTTP请求去请求图片资源。