今天完成的事情

任务7

明天计划的事情

任务8

遇到的问题

# hover出现操作选择

解决方法：谷歌出案例，写好选择框设置 display=none

hover时设置 display=block

# 设置hover 触发选择未出现，

解决方法：hover触发的修改属性的元素，是被触发的元素的子元素

# 选手框采用flex布局，挤在一行

解决方法：设置magin: 0 3rem;使得一行只能容纳三个

#宽度改变后，重新挤到一行，或者小于三个选手框

解决方法：设置 四行容器，flex布局

 <div class="d-flex justify-content-around w-100 ">

.bigBox {
margin-bottom: 6rem;
}

#结果页 头尾采用flex布局，主体伸缩，导致尾部无法置于主体上部，无法实现透明

解决方法：改用fiexed 重新布局头尾

收获

# audio元素

HTML

允许内容（Permitted content）

如果元素包含 src 属性：零个或多个 <track> 元素，其后紧跟不包含 <audio> 或者 <video>媒体元素的透明内容。

属性

该元素包含 全局属性。

autoplay 布尔属性；如果指定（默认值为"false"！）；指定后，音频会马上自动开始播放，不会停下来等着数据载入结束。

buffered 你可以通过该属性获取已缓冲的资源的时间段信息。该属性包含一个 TimeRanges 对象。

controls 如果设置了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。

loop 布尔属性；如果指定，将循环播放音频。

mozCurrentSampleOffset 在音频播放时，表示相对于音频开始处的偏移量的一个数值。

muted 表示是否静音的布尔值。默认值为false，表示有声音。

played 一个TimeRanges 对象，表示所有已播放的音频片段。

preload 枚举属性，让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。可以是以下属性之一：

none: 示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存；

metadata: 示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的。

auto: 示意用户可能会播放音频；换句话说，如果有必要，整个音频都将被加载，即使用户不期望使用。 空字符串 : 等效于auto属性。 假如不设置，默认值就是浏览器定义的了（不同浏览器会选择自己的默认值）， 即使规范建议设置为 metadata.

使用备注： autoplay 属性优先于 preload 假如用户想自动播放视频，那么很明显浏览器需要下载视频。同时设置autoplay 和 preload属性在规范里是允许的。 规范没有强制浏览器去遵循该属性的值；这仅仅只是个提示。

src 嵌入的音频的URL。 该URL应遵从 HTTP access controls. 这是一个可选属性；你可以在audio元素中使用 元素来替代该属性指定嵌入的音频。

volume 音频播放的音量。值从0.0 (无声) 到 1.0 (最大声). 时间偏移量目前是指定为float类型的值，表示偏移的秒数。

备注： HTML 5 规范中，时间偏移量值的定义还没有完成，有可能会变更。 #

# Browsersync

能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。

1.安装node.js 已安装过略

2. 安装 BrowserSync

从Node.js的包管理（NPM）库中 安装BrowserSync。打开一个终端窗口，运行以下命令： npm install -g browser-sync

3 报错'nmp' 不是内部或外部命令，也不是可运行的程序或批处理文件。 解决办法输错 应该为 npm

4安装完成

5输入命令监控本地服务器

6webstorm自动刷新

# mp3在线压缩

# 矢量图标调用

<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<i class="fa fa-play-circle fa-2x mr-3" aria-hidden="true"></i>

i {color: #fbb435; }

# 设置line-height = height 即可使得高度不变的单行文本元素居中

# 三角形图标

# hover伪类

:hover CSS伪类适用于用户使用指示设备虚指一个元素（没有激活它）的情况。这个样式会被任何与链接相关的伪类重写，像:link, :visited, 和 :active等。为了确保生效，:hover规则需要放在:link和:visited规则之后，但是在:active规则之前，按照LVHA的循顺序声明:link－:visited－:hover－:active。

:hover伪类可以任何伪元素上使用。

# 阿里巴巴矢量图调用

采用symbol引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：

支持多色图标了，不再受单色限制。

通过一些技巧，支持像字体那样，通过font-size,color来调整样式。

兼容性较差，支持 ie9+,及现代浏览器。

浏览器渲染svg的性能一般，还不如png。

使用步骤如下：

第一步：拷贝项目下面生成的symbol代码：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

第二步：加入通用css代码（引入一次就行）：

<style type="text/css">
.icon {
   width: 1em; height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
}
</style>

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>

效果如图 ：

深度思考

1.什么是CSS sprites？

css sprites 又叫雪碧图 图像精灵是放置在单个图像中的一组图像。 包含许多图像的网页可能需要很长时间才能加载并生成多个服务器请求。 使用雪碧图将减少服务器请求的数量并节省带宽。现在提倡用图标代替雪碧图。

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

浮动属性产生之初是为了实现“文字环绕”的效果，让文字环绕图片在网页实现类似word中“图文混排”。

定位方式：

浮动让元素脱离正常流，向父容器的左边或右边移动直到碰到包含容器的边【经测试碰到padding即停】或者碰到其他浮动元素。文本和行内元素将环绕浮动元素。

清理浮动方法

• 使用带有clear属性的空元素
• 使用CSS的:after伪元素
• 使用CSS的overflow属性进行怪异处理
• 给浮动元素的容器添加浮动
• 使用邻接元素清理
• 其他方法
• 使用display:table模拟表格布局也可以解决浮动的问题，并可自动对齐高度。

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

rgba和opacity

opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。

display和visiblity

1.是否是继承属性：display不是继承属性，而visibility是继承属性，后代元素的visibility属性若存在则不会继承，若不存在则继承父元素visibility的值，意味着：父元素的visibility为hidden但是子元素的visibility为visible则子元素依旧可见，子元素visibility不存在则子元素不可见。而元素的display属性设为none其后整棵子树都不可见。

2.是否占据空间：使用display:none，在文档渲染时，该元素如同不存在（但依然存在文档对象模型树中）；而使用visibility :hidden，其占的空间会被空白占位。即一个（display:none）不会在渲染树中出现，一个（visibility :hidden）会。

3.页面相关属性改值后是否重新渲染：visibility :hidden不渲染；display:none渲染。

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

层叠上下文，英文称作”stacking context”. 是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。

这里出现了一个名词-z轴，指的是什么呢？

表示的是用户与屏幕的这条看不见的垂直线（参见下图示意-红线）： 网页中z轴示意 

某些情况下z-index确实可以影响层叠水平，但是，只限于定位元素以及flex盒子的孩子元素；而层叠水平所有的元素都存在。

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

默认情况下，移动端浏览器上，:hover & :active 伪类不起作用，用户体验极差。解决方法是在body标签上加上ontouchstart事件

<body ontouchstart="">

<script>
  document.body.addEventListener('touchstart',function(){},false);
</script>

成果

http://www.jinjun.wiki/task/css/task7/ 

http://www.jinjun.wiki/task/css/task7/vote.html

 http://www.jinjun.wiki/task/css/task7/result.html