一、今天完成的事情：

1.完成任务8的主页

2.熟悉使用Bootstrap制作响应式导航栏

3.雪碧图的优缺点

二、明天计划的事情：

完成任务8剩下的页面

三、遇到的问题：

主要还是一些布局问题，

使用Bootstrap栅格布局的时候，窗口拉小的话会挤压到col，然后布局会错位，文本是使用span标签来写的，可能使用div变成块元素，然后给其定宽，再用position定位比较好，这样就不会再窗口拉小的时候移位了。

四、收获：

1.制作响应式导航栏

为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。

2.雪碧图的优缺点

在实际的使用雪碧图制作页面的过程中，发现了雪碧图的一些缺点，先归纳总结以下：

优点：

雪碧图是将许多图标按规律放在同一张图里，这样网页加载的时候就只需要一次的加载请求，不需要多次加载，从而影响性能。

缺点：

1.当雪碧图里的图标想要获得居中或者其他的效果，比较不容易。需要给元素先定宽或者高，然后再通过background-position在这个宽度里进行调整。但是如果遇到制作自适应高分辨率的页面，一般元素的宽是不定的，这样当屏幕放大缩小的时候，雪碧图里的图标往往就会因为高宽变大变小而被遮掩或者断裂，甚至出现别的图标。

2.可维护性也比较差，如果想要添加改动图标，需要先在雪碧图定好位置，如果图标大小跟原来的有很大差别，还需要调整元素的大小等，比较麻烦。

使用技巧：

1、CSS Sprites图片顺序合图片由上至下、左至右添加。而background-position一般采用数字组合形式定位，这样能减少维护带来的不必要麻烦。 

2、不建议CSS Sprites图片中保持一定的间距，因为文件size增大而增加文件体积。 

3、CSS Sprites图片中把颜色较近或相同的组合在一起可以降低颜色数，因为少色数的图片文件体积会相对的小。 

4、size相同的CSS Sprites图片中留有较大空隙，某程度上多数情况会增大了体积，所以CSS Sprites的图片不要有空隙。 

5、在size相同的CSS Sprites图片中，垂直排列的图片会比水平排列的文件体积要大。 

6、在CSS Sprites图片中，水平排列的图片会比垂直排列的文件体积要大。 

7、图片对等合并：应用CSS Sprites图片时，适当地把对等相同的图像合并，以节省空间及减少体积。 

8、区分开不需要合并的图像：如当前用户确定只显示一种状态或一个级别时，不必要把其他的级别或状态的图片合并。 

9、黄金切割位：在CSS Sprites图片的最右或左边为最灵活动位置最适宜摆放文本前的icon，因此不会受到其它CSS Sprites图片干预，也不需要预留一定的行宽。

进度：任务8

任务开始时间：06.07

预计demo时间：06.13

是否有延期风险：有

禅道：http://task.ptteng.com/zentao/project-task-729.html