今天完成的事：

学习Bootstrap关于轮播图介绍和使用，自己跟着教程写了一个DOM来理解关于轮播图的使用。

明天计划的事：

完成第一个页面，学习更多bootstrap知识

遇到的问题：

在刚开始写DOM时，没有实现轮播图效果，经师兄提点后原来是因为我用的是bootstrap3导致版本不兼容。

收获：

对任务7的深度思考什么是CSS sprites了解了

CSS sprites是指把网页中很多小图片（很多图标文件）做成按规律排列的一张大图上，在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。

我们知道浏览器在加载网页的时候图片文件及外部的JS、CSS文件都需要单独下载，JS是堵塞HTML下载进程的，图片是另外开启进程来下载的，不同的浏览器会有不同的同时下载图片的数量的限制或者一个或者五个或者十个，反正是有限制的，所以如果一个遍布了图片的网页，或者一系列网页，即使你网速再快也要分批次的下载这些图片。

而且每个图片的下载都是一次完整的HTTP请求-响应。而把很多小图片集中到一张图片上这样在只需要一个HTTP请求-响应，在现在网速条件下不超过200k的图片下载速度是差不多的，下载一次之后无论是该页面还是站点其它页面使用包含在这张大图上的图片的时候就可以使用缓存，不会带来反复下载的开销，所以只有一个HTTP请求-响应。

所以使用CSS sprites最大的好处就是减少HTTP请求，加快网站响应速度，提高网站性能。

CSS小妖精实现方法

明白了为什么要这么做，我们就可以看看该怎么来做了，先有世界观再有方法论，首先了解一下CSS的background-position

background-position 设置或检索对象的背景图像位置。必须先指定 background-image 属性。

语法： 
background-position : length || length 
background-position : position || position 
取值： 
length  : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位  
position  : top | center | bottom | left | center | right