今天完成的事情：今天把任务7做完提交了，修改了其中出现的一些问题。了解了下任务8，因为任务8要求的是用bootstrap框架来写，在网上了解了下其中的一些元素的用法，有导航栏和轮播图片的设置
明天计划的事情：明天的话计划把任务8的第一个页面尽量做完，因为这个页面算是比较复杂的一个页面，包括布局以及bootstrap 的学习以及使用
遇到的问题：

       1，今天遇到的问题就是在做点击页面跳转到时候

如图所示点击跳转到第二个投票页面，刚开始自己做点击时间的时候是把文字做成a标签，加了一个href跳转的第二个页面，但是最后发现点击挑战这个效果应该是加到这个div上面而不是仅仅点击文字有效，后来网上找了下发先只要把这个a标签加上个 display:block 就可以实现点击div跳转，经过查阅资料发现 display:block 这个属性是把包含的属性以块元素的方式显示，这样就实现了点击div跳转的效果。

     2.第二个问题是hover的效果，

这四个圆点放上去的话需要显示颜色为其他颜色，这个比较简单，出来昨天所说的hover一个父子关系一个同级关系，还可以改变自身样式，只需要再其元素上加上

属性:hover

background-color: #29b078;

就可以实现效果

收获：了解了href标签的使用，了解了bootstrap的其中一些组件的使用，这个框架布置的页面非常简洁，只需要花时间去学习一下此框架的使用就行，

任务总结7

任务耗时3天

总结 任务7这3个页面其中中间投票页面还是有难度的，其他的两个页面需要注意的就是选择游戏页面中间黄色的三角是相对于白框而居中的，包括下面四个白色的点，鼠标放上去会变色，这一点也需要hover效果，投票页面需要注意的就是其中的hover效果，点击的话会有四个图片，这一点注意父子关系就可以。最后一个获胜页面控制好布局，包括字体大小以及整体缩放就没啥问题了

深度思考

       1. 什么是 CSS sprites？

简单来说就是雪碧图，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。再利用 CSS 的 “background-image”，“background- repeat”，“background-position” 的组合进行背景定位，background-position 可以用数字精确的定位出背景图片的位置

优点

1. 利用 CSS Sprites 能很好地减少网页的 http 请求，从而大大的提高页面的性能，这也是 CSS Sprites 最大的优点，也是其被广泛传播和应用的主要原因；

2.CSS Sprites 能减少图片的字节，曾经比较过多次 3 张图片合并成 1 张图片的字节总是小于这 3 张图片的字节总和。

3. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

4. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

缺点

1. 在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

2.CSS Sprites 在开发的时候比较麻烦，你要通过 photoshop 或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；

3.CSS Sprites 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的 css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动 css。

2. 什么是浮动？有哪些清除浮动的方法？

首先要知道，div 是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流

其基本出发点均是：“如何在一行显示多个 div 元素”

浮动可以理解为让某个 div 元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次

footer {

  clear: both;

}

·       left：停止任何活动的左浮动

·       right：停止任何活动的右浮动

·       both：停止任何活动的左右浮动

·        

·       给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动

3.rgba 和 opacity 的透明效果有什么不同？display 和 visiblity 有什么区别？

  对提示框进行一个透明度的设置。

首先使用了 opacity 属性

是可以通过黑色框内白色的字，看到网页文本里的字的。

在使用了 background-color:rgba(0,0,0,0.5) 之后

这里仅仅是背景透明了，框内的文字并没有继承该属性，所以并不能透过文字看到网页里的文本

display 属性设置一个元素应如何显示，visibility 属性指定一个元素应可见还是隐藏。

隐藏一个元素可以通过把 display 属性设置为 "none"，或把 visibility 属性设置为 "hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

4. 描述下 z-index 和叠加上下文是如何形成的？

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

可以把「层叠上下文」理解为当官：网页中有很多很多的元素，我们可以看成是真实世界的芸芸众生。真实世界里，我们大多数人是普通老百姓们，还有一部分人是做官的官员。OK，这里的 “官员” 就可以理解为网页中的层叠上下文元素。

换句话说，页面中的元素有了层叠上下文，就好比我们普通老百姓当了官，一旦当了官，相比普通老百姓而言，离皇帝更近了，对不对，就等同于网页中元素级别更高，离我们用户更近了

5. 如果是在手机上查看投票页，没有 hover 效果时应该怎么办

    移动端用一下问题来解决

  touchstart 事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

　　touchmove 事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用 preventDefault() 事件可以阻止滚动。

　　touchend 事件：当手指从屏幕上离开的时候触发。

　　touchcancel 事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了

！