我在中软上课的第七天，今天上课的案例知识点有六个，下面我将一一列举。
知识点一、精灵图布局：精灵图其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。常用于导航栏图标、列表项图标等。
使用精灵图的优点：
1、能很好地减少网页的http请求，从而大大的提高页面的性能，这也是精灵图最大的优点，也是其被广泛传播和应用的主要原因；
2、能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
缺点：
1、在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
2、精灵图在制作的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；
制作精灵图，可以使用Photoshop里面的“切片工具”。
1、利用PS软件打开目标图片，点击：文件-打开-目标文件。
2、选择PS中的切片工具，快捷键为K键。点击一下默认为“起点”，再次点击默认为“终点”，右击出现的编辑框可以改变切片大小。使用该工具框选图像进行分布，切成四片，每一片右上角都会显示切片标签。
温馨提示：如果想把一个图片平均分成几等份时，这个操作只要右击“切片分割”就好了，可以选择水平和垂直，将图片平均分割，不再需要一步步切割了。
3、切片完成，接下来要建立超级链接。
首先切片工具选择切片选择工具，然后双击要加入超级链接的切片区域或者右击“编辑切片”。其次打开你自己想要链接的“网络地址”，复制下，然后黏贴到编辑框里面就可以了
4、当切片的链接做好后，那就是保存图片了。
点击“文件”选择“存储为web和设备所用的格式”，然后点击存储，选择图片格式为“html和图像”，存储后文档里面会出现一个网页打开的文件和一个images的文件夹。
注意事项：（1）如果切片要均匀切割的话，那么只要直接右击“划分切片”就好了，这样可以得到均等大小的切片
（2）为了更加精确制作，建议PS操作区用座标模式，快捷键：Ctrl+R