任务七完成的事情：

      1.为三个页面需要的图片切图，生成sprites

      2.搭建bootstrap框架  下载bootstrap文档，在head头标签中加入：

 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

                  框架是搭起来了，不过没有用bootstrap中的类名控制样式，类名各种属性还不太熟悉，用的是自定义样式控制css样式，打算有空挖一下bootstrap框架

      3.完成第一个页面：版本选择    用到的还是很基础的东西，float、盒子、div+css排版，用定位position固定header和图标

      4.完成第二个页面：投票    用的还是前面任务所学习到的东西，有不一样的是要增加一个音频播放功能，学习到了<audio>标签，

         <audio>标签：用于在文档中表示音频内容。

               src属性：定义音频的文件地址

               control属性：对音频文件进行控制，操作它的进度、暂停播放、音量等（不同的浏览器会显示不同的样式模板）                                                  chrome浏览器的control样式：

               其他属性：

              声明音频<audio>有两种格式：  格式1：<audio src="音频的路径">

                                                  </audio>

                                           格式2：<audio>

                                                     <source src="音频的路径"></source>

                                                  </audio>

     5.完成第三个页面：结果   做这个页面get到一个知识点，关于透明和半透明，有两种方式：

                      方式一：<opacity>属性

                               opacity属性设置元素的不透明级别，属性值value从0.0（完全透明）到1.0（完全不透明)

                      方式二：background-color：rgba（0-255，0-255，0-255，0.0-1.0），前三个数字是RGB定义的颜色，最后面一个数字定义透明                                度（0.0（完全透明）到1.0（完全不透明)）

                      页面其他部分用的还是盒子，定位，浮动等知识点。

     6.给几个页面之间加上链接跳转

               先将要跳转的div盒子做成按钮，然后用<a>标签包覆在盒子上，<a>标签中加入链接；可以实现各个页面之间的跳转。

               还有一种方式就是表单输入input属性，将它的type设置成button，然后在herf中加入点击按钮后要跳转的链接。

     7.理解【深度思考】中的问题

            （1）什么是css sprites？

                 css sprites也被称为css精灵，它是一种网页图片处理方式，它允许将一个页面中所要使用的零星图片放到一张大图中去，主要是为了减少http的访问数量，防止页面加载延迟；

                css sprites实现的原理是：把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

                参考：https://baike.baidu.com/item/css%20sprite/1139316?fr=aladdin

             (2)什么是浮动，有哪些清除浮动的方法？

                  浮动float属性：定义元素（盒子）在哪个方向浮动；浮动的框可以向左或向右移动，直到它的边缘碰到包含框或另一个浮动框为止，由于浮动框不在文档的普通流中，所以文档的普通流中的块框就像浮动框不存在一样。

                  float属性值：left:元素向左浮动    right：元素向右浮动    none：元素不浮动

          清除浮动的方法：<1> clear:none(允许两边都有浮动）|left（不允许左边有浮动）|right（不允许右边有浮动）|both（不允许有浮动对象）

                          <2>给父元素设置overflow：hidden，有缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素                        参考：https://blog.csdn.net/sinat_36533893/article/details/69668622

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

                background-color：rgba（）和opacity都可以对元素进行透明度的设置，但不同的是：

                        opacity除了对背景生效外，对应用元素的内容也会继承透明度的设置，

                        background-color：rgba（）只作用于元素的颜色或者背景色

                display和visiblity都可以将元素隐藏，但不同的是：

                        display设置为none时，元素会被隐藏掉，并且当前的位置不再占据，

                        visiblity设置为hidden时，元素会被隐藏，但是当前的位置还是会被占据

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

                 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

                 层叠上下是基于z轴的一个环境，这个环境一直存在，它默认的层叠顺序的原则是：·同级元素中，后面的元素会覆盖前面的元素

·父子元素中，子元素覆盖父元素；层叠顺序：就是层叠上下文元素在层叠上下文中的顺序

                参考：https://blog.csdn.net/cat_sky/article/details/80302245

                       https://blog.csdn.net/chen1057376155/article/details/51933665

          （5）如果在手机上查看投票页，没有hover效果时怎么办？

                 ：hover元素定义为用于选择鼠标指针浮动在上面的元素

                 在移动端没有鼠标，所以移动端没有hover特效，但是点击的时候会触发click，再次点击就会消失

                 解决方法：使用触摸事件（touch），触摸事件(touch)会在用户手指放在屏幕上面的时候、 在屏幕上滑动的时候或者是从屏幕上移开的时候触发。

明天计划的事情：因为要回趟家（大概得近1-2周），带不了电脑，所以暂停，不过会总结下前面学到的东西，重点是bootstrap框架

遇到的问题：

   1.设置投票页面<audio>的时候，control的控制样式有一长串，页面中只需要暂停播放的按钮，而且control样式也需要隐藏？

           问了下师兄，先将control暂停播放按钮的位置调整到页面中暂停播放图片的位置上，然后把control样式设置为opacity：0（透明）就好了，页面中看到的还是图片，点击图片就会播放音频

收获：如上