今天完成的事情：

任务七投票界面

用css画一个倒三角形

.triangle{
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #b9e9f5;
    margin-left: 66px;
}
.click{
    height: 50px;
    background: #29bde0;
    color: #fff;
    line-height: 30px;
    padding-left: 65px;
}
.lake{
    height: 500px;
    background: #29bde0;
    display: flex;
    justify-content: space-around;
}

雪碧图以及

怎么制作雪碧图

明天计划的事情：继续任务七的其他部分

遇到的问题：开始不知道怎么写一个倒三角形，有想过用切图直接拉上去，被师兄狠狠地批了一顿之后，去百度搜到了答案。还有就是雪碧图，没看雪碧图是什么之前我一直苦思冥想怎么才能把好几张图片一起用上去，看了雪碧图是什么以后觉得自己像个傻子一样，把他们合成一个图片就好了。下好合成雪碧图的软件不太会用，试了好几遍最后才慢慢摸到了窍门。

收获：今天学会了如何用css画倒三角形，看了以后才明白还是自己看资料看的少。还有就是多个图片组成的雪碧图制作SS雪碧图即CSS Sprites，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。由多个小图片合成的，前端成它为CSS雪碧图。了解了background-position属性的用法，那么对于如何使用雪碧图的学习就相对简单了很多。使用雪碧图之前，我们需要知道雪碧图中各个图标的位置。雪碧图中各个小图标（icon）在整张雪碧图的起始位置，例如第一个图标（裙子）在雪碧图的起始位置为 x：0，y：0，第二个图标（鞋子）在雪碧图的起始位置为 x：0，y：50px，第三个图标（足球）在雪碧图的起始位置为x：0，y：100px，依次类推可以得出各个图片相对于雪碧图的起始位置。只不过初学者可能会对雪碧图中的background-position属性值为负值有所疑惑。这个问题其实不难回答，如果细心的人应该很早就发现了使用负数的根源所在。这边用上面的Demo为例，来分析这个问题。上面的span标签是一个25px长宽的容器，在使用背景图时，背景图的初始位置会从容器的左上角的开始铺满整个容器，然而容器的大小限制了背景图呈现的大小，超出容器部分被隐藏起来。假如设置background-position: 0 0 那么意味着，背景图相对于容器（span标签）x轴=0；y轴=0的位置作为背景图的起始位置来显示图片。所以如果需要在容器中显示第二个图标，意味着雪碧图x轴方向要左移动，左移动雪碧图即它的值会设置为负数，同理y轴方向也一样。