今天完成的事情：完成了任务八

明天计划的事情：修改任务八

遇到的问题：暂无

收获：学习到网格布局display：gird。

          学习到动画事件

一、网格布局

步骤一：将容器元素定义为一个 grid(网格) 布局（用display: grid）

<div class="网格容器">  （html里）

.网格容器{
    display: grid;} 在css里

步骤二：使用 grid-template-columns 设置 列 的尺寸大小

                 和 grid-template-rows       设置 行 的尺寸大小，

                   使用空格分隔的值列表，用来定义网格的列和行。这些值表示 网格轨道(Grid Track) 大小，它们之间的空格表示网格线。

.网格容器{
    display: grid;
    grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%; 10个数，代表10列，%为每列的比例
    grid-template-rows: 180px 30px 30px 30px 30px 30px 30px 30px;8个数，代表8行，每个数代表此行的高度

步骤三：然后通过 grid-column 和 grid-row 将其子元素放入这个 grid(网格) 中。

<div class="网格容器">
    <div class="box-one"></div>
    <div class="box-two">.............. 在html里

.网格容器某一个格子{
       grid-column-start: 1;从第一列开始
    grid-column-end: 5;到地五列结束  在css里

注意：他们与 flexbox 类似，网格项（grid items）的源(HTML结构)顺序无关紧要。

网格容器(Grid Container)：应用 display: grid 的元素。这是所有 网格项（grid item）的直接父级元素。

网格项(Grid Item)：网格容器的子元素（例如直接子元素）。

网格线(Grid Line)：构成网格结构的分界线。

                              它们既可以是垂直的（“列网格线(column grid lines)”），

                              也可以是水平的（“行网格线(row grid lines)”），并位于行或列的任一侧。

网格轨道(Grid Track)：两条相邻网格线之间的空间。

网格单元格(Grid Cell)：两个相邻的行和两个相邻的列网格线之间的空间。

网格区域(Grid Area)：一个 网格区域(Grid Area) 可以由任意数量的 网格单元格(Grid Cell) 组成

二、动画事件

-webkit-animation是一个复合属性，

webkit-animation: name duration timing-function delay iteration_count direction;

                              命名   持续时间  时间曲线             延时      重复几次            方向

.box-fifteen{
    -webkit-animation: cartoon 1s; 讲box-fifteen命名为cartoon，并持续1秒
}

@keyframes animationname {keyframes-selector {css-styles;}}

animationname 必需。定义动画的名称。

keyframes-selector必需。动画时长的百分比。合法的值：0-100%

                                                                         from（与 0% 相同）

                                                                          to（与 100% 相同）

css-styles 必需。一个或多个合法的 CSS 样式属性

@keyframes cartoon { 寻找元素名为cartoon 从开始到结束，以Y轴旋转720度
    0%{
        
-webkit-transform: rotateY(0deg);Transform 是 变型 的意思，他的值主要包括 旋转rotate，扭曲skew，缩放scale，移动translate以及矩阵变形matrix 。
                      rotateY()函数用于在3D空间中使元素沿Y轴旋转。它使用<angle>值作为参数。如果是正角度，元素顺时针旋转。如果是负角度，元素逆时针旋转。    }
100%{
        -webkit-transform: rotateY(720deg);  0% 是动画的开始时间，100% 动画的结束时间    }
}

任务七总结

总结                                                                                                                                                                                                                           

通过任务七，主要是对前面所学到的盒子div以及弹性盒子flex加深运用。然后也学习到了如何用纯CSS实现圆点和三角形，原理是通过控制border属性。然后对伪元素的有了初步的认识和，又多次运用了hover标签，加深了对它的理解。学习了如何插入音频，和如何使“播放音频的按钮”出现在想要的位置。

学习了如何半透明。使背景透明化。学习了超链接，将3个页面联系起来。遇到最大的难题应该是响应式下雪碧图的引用，由于雪碧图是作为背景图插入到容器，从border内边缘（padding+width）的左上角开始排列，当容器扩大时，里面内容变大，雪碧图的其他地方就会随之显示。为了解决，选择两个盒子，外面大盒子，来自适应，里面的小盒子引入雪碧图，并固定小盒子的大小，并在做媒体查询，可能有点麻烦。也可以用只一个盒子引入，然后在媒体查询多配置一些。最后对一些标签深img，和flot、position。有了更深的理解。

脑图：

深度思考：

1.什么是CSS sprites？

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

当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了http请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。

缺点：就是在拼图时，比较麻烦，还有后期维护也比较麻烦，比如做好的图，然后一个图标改了大小，但是图标之间留的位置不够，那你就要重写很多css

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

        1浮动定位元素会被排除在文档流之外-脱离文档流(不占据页面空间),其余的元素要上前补位 

　　 2、浮动元素会停靠在父元素的左边或右边，或停靠在其他已浮动元素的边缘上(元素只能在当前所在行浮动) 

　    3、浮动元素依然位于父元素之内 

　　4、浮动元素处理的问题-解决多个块级元素在一行内显示的问题 

（1）对父级设置适合高度样式清除浮动。

（2）新引入一个空的子元素，运用clear:both样式清除浮动。

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

rgba可以不透明字体

opacity是透明全部

display通常可以设置为none、inline、block

visibility通常可以设置为hidden、visible

当display为none，visibility为hidden时，元素都会不见。不过其还有不同之处。

 display会将元素隐藏掉，并且位置不再被占据，而visibility则是占据原来的位置。

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

z-index属性 ：

z-index只能在position属性值为relative或absolute或fixed的元素上有效。 

基本原理：z-index值可以控制定位元素在垂直于显示屏方向（Z 轴）上的堆叠顺序（stack order），值大的元素发生重叠时会在值小的元素上面。 

使用相对性：z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值（如果有）为子元素定义了堆叠顺序（css版堆叠“拼爹”）。向上追溯找不到含有z-index值的父元素的情况下，则可以视为自由的z-index元素，它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值，决定其堆叠顺序。同级元素的z-index值如果相同，则堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。所以如果当你发现一个z-index值较大的元素被值较小的元素遮挡了，请先检查它们之间的dom结点关系，多半是因为其父结点含有激活并设置了z-index值的position定位元素。

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

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

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

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

4.touchcancel事件：touchcancel，是在拖动中断时候触发。