今天完成的事情：学会了使用CssGaga，学会了雪碧图。完善了下task6的第一个页面（感觉还需要改。。。）。把第二个页面代码稍作修改并上传至服务器。

明天计划的事情：完成任务6的三个页面。

遇到的问题：

Q1：使用CssGaga来合成雪碧图和生成相对应的css文件。按照新手视频教程http://pan.baidu.com/s/1mgiQvJa操作，发现并没有效果。

A1：查看CssGaga的官网帮助索引找到解决方法。更换图片目录，视频中目录要求为css/slice/，而实际上要求已经更换为css/img/slice/。

参考资料：CssGaga - AutoSprite  （http://www.99css.com/726/）

Q2：CssGaga生成的雪碧图为，没有在同一行让我很奇怪，按照教程来说应该是在同一行的，打算先用然后在查这个问题。在使用的过程中发现由于四个图标大小不一样，导致一个盒子里出现两个图标或者图标显示在左上角。而我们用的是雪碧图，已经使用background-position定位用雪碧图的哪张图片，不能再使用background-position定位图标在盒子中的位置了。出现了这样的囧况。

A1：重新使用PhotoShop切图，把图标切成一样大小的，然后再次用CssGaga生成雪碧图。这样就好了。

收获：

1、学会了使用CssGaga来生成雪碧图和相应的css文件。只是CssGaga最基本的方法，看功能介绍还能直接用完全写好的css文件来生成相应的雪碧图和css文件。但是需要满足CssGaga的相关规则要求。

2、知道了如果是类似图标无论图像大小是否一致，如果在相同大小的盒子里显示，要切成盒子大小的图标。方便、省事还好看。之前全部按图像实际大小来切图的想法是错误的，虽然能节省图像大小，但是css布局上会引发很多问题。

3、之前想着布局应该是 为一个盒子的，但是想着其他的没有下面四个功能框，就分两个盒子设计了。结果。。。后来看其他人设计的，直接傻了。还是想的太少，直接闷头上手就写。感觉task6的第一个页面还得大改，因为布局就有问题！以后要吸取教训。

     今晚有事要出去趟，晚上如果能够早些回来把音频（涉及部分js内容）和hover这两个知识点仔细看看应用到第一个页面上去。

     最后附上自己的服务器任务主网页...（尽量看后面的任务代码，前面的自己都觉得没法看，等学完css全部重新。各位看官拍砖轻点！）

     风雅阁-Michael.Feng    

     http://119.10.57.66:880/ptt008/