今天完成的事情，任务7首页，投票页头。

遇到的问题1，任务七首页做得太丑了，看过成果图，总感觉哪里很别扭，首页成果图的内容部分的左右两边，拉伸时，有一种被东西顶住的感觉。

在盒子模型的内容旁边，左右给他们各自20margin。用内边距顶住内容部分，如下图。

.game-two{

    color: #999999;

    font-size: 1.2rem;

    margin-left: 20px;

    margin-right: 20px;

    width: 37rem;

    text-align: center;

}

右边的图标使用背景图片之后，背景图片的位置总会窜进内容里面，给左边内容部分设置外边距顶着图标，解决问题。

问题2

下面的四个小圆点，需要去用hover伪类去做，保证点击小圆点之后，小圆点会改变背景颜色。

代码如下

改变盒子的样式，使用

.circle-foul:hover{

    background: #29bde0;

}

选择器后面加入hover，鼠标移动到触发区域，就会改变样式。

hover可以给任何元素设置。

如果容器里面存在父级与子级关秀得话，可以设置父级去改变子级的样式

.container:hover .content，hover

（父级）              （子级）

记得任务6里面的模拟下拉框的，触发就用到了hover。

任务7投票页，有两个图标需要需要去用到雪碧图，

CSS sprite，我们需要用雪碧图的原因是因为，浏览器页面需要有一些小图标组成，但是过多的小图片会向服务器发送请求，还会浪费资源，

会影响到我们的加载速度。我们用雪碧图能够解决以上问题。

今天未解决的问题，提示部分下面的小尖角，一时不知道怎么去做，有点迷茫。因为他需要写两个盒子，还要放在一起，用margin的效果问题很大。

今天的收获，认识hover伪类，学会制作雪碧图。

明天的任务，任务7投票页，与讲小课堂。