今天完成的事情：

1、开始布局任务八。

明天计划的事情：

认真完成任务八的第一个页面。
遇到的问题：

关任务八第一个页面轮播的效果，查了半天资料，虽然也做出了轮播效果，可是还没弄懂具体的原理。

http://www.cnblogs.com/ATtuing/p/5424227.html 里面有关于页面轮播的介绍。 
收获：

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

‍‍先来看看css3中的rgba语法：‍rgba(r,g,b,a)‍‍

其中： ‍‍R：红色值。正整数 | 百分数

     ‍‍ G：绿色值。正整数 | 百分数

     ‍‍  B‍‍：‍‍蓝色值。正整数| 百分数‍‍

     ‍‍ A：透明度。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字‍‍。‍‍正整数为十进制0~255之间的任意值，百分数为0%~100%之间的任意值。如果A取值0或者0%；那该元素就是完全透明的（也就是看不见的，但是可以透过该元素看到该元素下的元素），数值为100%（或255）时则意味着该元素完全不透明。‍‍‍‍‍‍

‍‍对于Opacity来说：opacity: value|inherit;‍‍value:不透明度，从 0.0 （完全透明）到 1.0（完全不透明）

‍‍‍‍所以，rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

而rgba()只作用于元素的颜色或其背景色。‍‍opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。‍‍

‍‍visibility和display两个属性都有隐藏元素的功能。visibility属性所控制的元素虽然不在浏览器里面显示出来，但他在浏览区里是存在的，只是不显示而已。而display属性设置为none，这个元素就变成了一个不显示的元素,不会占有文档流中的空间。‍

对于元素属性display：常用的值有‍‍block——元素显示为块元素；inline-block——元素显示为行内块元素；none——元素不显示，元素隐藏且不占用空间。属性值设为none的元素并且释放该元素在文档中所占的物理空间，对于其他元素来说，相当于该元素不存在，因此，该元素的位置被其他元素顶替。‍‍‍

对于元素属性visibility:其常用的值有visiable——默认属性，元素可见。hidden——元素隐藏，‍‍但仍然为其保留相应的空间。

‍‍collapse——‍‍当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。‍‍‍‍

综上所述：它们的区别在于

‍‍‍‍display:none;使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;

‍‍visibility:hidden;‍‍使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。我们可以根据它们的区别，在不同情况下，合理的运用这两者。‍

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

‍‍       z-index属性设置元素的堆叠顺序，数值越大的越靠前。注意，z-index的值可以是负数，并且只在元素设置定位(比如position:absolute)才可形成。‍‍

‍‍‍‍HTML文档中的每个元素都能在文档中其它元素的之前或 者之后。这就是所谓的层叠顺序。‍‍

‍‍‍‍‍‍        当‍‍z-index‍‍同‍‍position‍‍属‍‍‍‍‍‍性没有牵涉在一起的时候，规则 就相当简单：基本上，层叠顺序同元素在HTML文档中的次序一致。‍‍

‍‍当你把position属性一起考虑进来，那么任何拥有 定位的元素（及其子元素）都显示在任何非定位元素的前面。（一个“拥有定位”的元素指的是它有一个不为static的position属性值，例如：relative,absolute等）‍‍

‍‍最后，一并考虑上z-index，事情就变得稍微有点诡异了。首先 理所当然的认为较高z-index值的元素在较低z-index值元素之前，并且任何拥有z-index属性的元素在不具有z-index属性元素之前，但是并非这么简单。 首先，z-index仅仅对于拥有定位的元素有效。如果你试图给一个没有指名position属性的元素设置z-index，将没有任何效果。‍‍其次，z-index值可以创建层叠上下文，现在看似简 单的事情突然变得些许复杂了。‍‍‍‍

‍‍‍‍‍‍所谓的层叠上下文‍‍：‍‍一组拥有公共父级的元素在层叠顺序中一起上移或者下移被 称为层叠上下文。‍‍

     每个层叠上下文有一个单独的HTML元素作为它的根元 素。当一个新的层叠上下文在一个元素上形成的时候，层叠上下文将其所有的子元素都限制在层叠顺序的一个特定位置。这意味着如果一个元素被层叠 顺序底部的一个层叠上下文所包含，将没有办法将其置于另一个不同的具有更高层叠顺序的层叠上下文中包含的元素之前，即便这个元素有无限大的z-index值。（这段话我的理解就是，对于两个同级别且设置position（值不为static）的div来说，前一个div的z-index的值小于后一个div的z-index的值，那么对前一个div的子元素设置再大的z-index的值，这个子元素也不会显示在后一个div的子元素之前。）

 综上即：下面是确定具有单一层叠上下文元素层叠顺序的基本规则 （从后至前）：

• 层叠上下文的根元素
• 拥有定位的元素（以及它们的子元素），z-index值为负（较高的值层叠在较低的值之前；相同值的元素根据HTML中的出现顺序层 叠）
• 非定位元素（根据HTML中的出现顺序层叠）
• 拥有定位的元素（以及它们的子元素），z-index值为auto（根据HTML中 出现顺序层叠）
• 拥有定位的元素（以及它们的子元素），z-index值为正（较高的值层叠在较低的值之前；相同值的元素根据HTML中的出现顺序层 叠）

‍

‍‍3、如果是在手机上查看投票页，没有hover效果时应该怎么办？‍‍

查了下百度，有好几种答案，1、绑定touchstart,touchend事件，改变类 设置一个空的touchend事件，a:active 就能显示；

                                                   2、ontouchstart实现手机触屏中的hover效果  明天打算自己再试一下，搞懂这个问题。

‍‍task8才刚写，今天就不长传代码了，明天上传代码。