今天完成的事情：

1.学习了前几个任务的思考题

2.学习了css sprite

   1）什么是css sprite

        Css Sprites（雪碧图或css精灵），是网页图片处理的一种方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

    2）什么时候用到雪碧图

          a、静态图片，不随用户信息的辩护而变化

        b、小图片，图片容量比较小

        c、加载量比较

   3）怎么使用雪碧图

        利用CSS的"background-image"，"background-repeat"，"background-position"的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

代码如下：

       HTML

            <div class="box">

                     <span class="icon1"></span>

                     <span class="icon2"></span>

                     <span class="icon3"></span>

                     <span class="icon4"></span></div>

       CSS

            <style>

                  .box { width: 600px; 

                            height:300px; 

                            border: 3px solid #ccc; 

                            background-color: #8064A2; 

                           }         

                  span { display: inline-block; 

                             width: 25px; 

                             height: 25px; 

                             border: 3px solid #ccc;          

                             background-image: url(css/img/sidebar.png); 

                             background-repeat: no-repeat;          

                             margin: 5px;

                             }        

                .icon1 { background-position: 0 0;}        

                .icon2 { background-position: -40px 0;}        

                .icon3 { background-position: 0 -25px;}        

                .icon4 { background-position: -40px -25px;}    

           </style>

3.完成css任务6的切图

明天计划的事情：

1.继续css任务6

2.继续学习bootstrap

遇到的问题：

暂无

收获：

1.编程的速度逐渐提升，编程的思路也逐渐清晰。