前言

从零开始学前端系列课程，与传统的视频大课堂教学不同，没有填鸭；也普通做练习题的方式不同，没有假想的模拟题。

本课程拆出80个左右必须掌握的技能点，并对其分组，从易到难地列出学习曲线。同时从真实项目中拆解出与技能一一对应的不同难度的任务，通过解决任务来巩固夯实知识。

这就是IT修真院集自适应学习、师兄辅导、在线一站式学习的DWS学习法（Learning by Doing ，Learing by Wrong ,Learning by Share），在实战中学习，在试错中学习，在分享中学习。

经过线下5年多的实践探索，通过21万多篇学习日报，实现了1500余名结业学员99%就业率的教学成果。

从零开始学前端系列课程的任务分为两大部分，从CSS到JS，每一部分大概有15个左右的任务。每个部分分为技能任务阶段和复盘任务阶段，在任务实践中完成从技能学习到项目经验的积累。

一、这次将要执行的任务

二、为什么要开始这个任务

1.这个任务需要学会什么技能，为什么要优先学习这个技能？

1.1 HTML5的audio定义音频流：通过这个可以熟悉一些HTML5的新标签，同时看看视频标签、画布标签、拖放标签等较常用的部分，达到举一反三的目的。

1.2 处理半透明：学习用CSS完成半透明的时候，会发现它本身很简单，但大概不止一种办法。因此学习的重点在于分清楚不同方案之间的区别，以及了解清楚这个属性的兼容性如何，如何去解决它的兼容性。学会这些解决问题的思路和方法才是这个技能的重点。

1.3 CSS3动画：通过CSS3支持的动画属性，我们能创建更丰富的页面动画，取代许多以前页面中的图片、flash、js等。

2.这个任务为什么要用这种方式来设计，有没有其他的可替代的练习方案？

这个任务的CSS依旧基于bootstrap，让大家进一步熟悉这个CSS框架，并且自定义相关样式去覆盖它的一些基础设定，有助于大家理解boostrap的设计理念。并且在这个任务中添加了一些HTML5和CSS3的现代内容，紧跟web前端开发的时代脉搏。

3.做这个任务需要哪些基础知识，需要多久才可以把基础知识完成？

这个任务需要大致看看HTML5和CSS3中新增的标签和属性，但不要花太多时间，最多半天做个了解即可。

4.做这个任务设置了哪些具体步骤，为什么这么设计？

按产品的使用逻辑分步制作几个页面，这样在工作中便于向负责人展示每天的工作成果，也是职业素养的锻炼。

5.做任务的时候会遇到哪些常见的错误，需要参考什么样的参考资料？

透明时为什么连里面的按钮都一起透明了？这里涉及到css半透明的几个知识点了，认真看看opacity和rgba之间的区别，想想应该在什么场景下使用他们。以及filter表达式的用处，它们各自的兼容性是如何的。

6.怎么样才算把这个任务完成了，验收标准为什么要这么制订？

首先还是需要还原设计图，让页面一眼看上去和设计图是基本一致的；其次是改变浏览器宽度，保证页面布局不变；然后是保证在不同分辨率下，上面所用到的图片都不会被拉伸变形；以及各处文字的垂直居中要做好；最后依旧还是代码规范问题

7.整个任务需要多久才可以完成，最快的和最慢的会是多长时间？

我们认为这个任务大概需要22个小时即可完成，但每个人的基础知识学习能力等情况各不相同。对这方面本来就有基础或者是学习能力特别好的好人可能只需10个小时，而初次接触这些内容对这方面不是太敏感的同学则可能要花费长大40多个小时的时间。时长在这些时间之内都非常正常，如果有远远超出这个时间也未能做出的同学则应该多去请教一下各位完成过任务的师兄们，也许这个时候只需要旁人稍稍提点几句就能获得突飞猛进的进步。

8.如果我在做任务的时候遇到了困难，可以跳过任务中的哪些部分？

在这一节里，应该没什么特别困难的地方，希望所有人都能完成任务。

三、学习任务之前要先学会哪些知识点

1.HTML多媒体标签

常用的多媒体标签主要有两个，分别是<video>和<audio>，作用是解决网页上视频和音频播放问题。

audio的语法格式是：

<audio src="路径"  autoplay="autoplay" controls="true" loop=2></audio> 

• autoplay：控制网页加载时是否自动播放
• controls：是否显示播放控件，默认为不显示
• loop：用于控制循环次数

video的语法格式是：

<video src="路径" controls  autoplay width="300px"></video> 

• autoplay：控制网页加载时是否自动播放
• controls：是否显示播放控件，默认为不显示
• loop：用于控制循环次数
• width：设置播放窗口宽度
• height：设置播放窗口高度

2.半透明

根据不同的需求，有多种方法可以实现背景的半透明

2.1 RGBA：在现代浏览器中，可以直接用rgba颜色设置，括号中前三个值分别表示颜色红色，蓝色，红色的色值编码，第四个值表示透明度，范围值从0到1分别表示全透明和不透明：

{background-color:rgba(255,255,255,0.1)
}

2.2 opacity：在向下兼容老式浏览器时，可以用这个属性进行设置：

{filter:alpha(opacity = 50)
}

2.3 png图片：使用白色半透明的png图片。制作一个小的（如10*10）的白色半透明的PNG图片，将该图片设置为背景，设置background-repeat:repeat;

四、开始动手做吧

1.（环境搭建）观察任务描述，揣摩开发要点（0.5小时）
2.（环境搭建）配置本地nginx，本地启动服务器通过配置的域名访问新创建的页面（1小时）
3.（编码实战）为所要用的背景图、头像、小图标切图（1小时）
4.（环境搭建）为项目使用CSS框架Bootstrap（0.5小时）
5.（环境搭建）根据项目实际需求添加自定义样式表（0.5小时）
6.（编码实战）理解页面逻辑，用html+css写页面的第一个页面：版本选择（3小时）
7.（编码实战）版本选择页面注意下方的四个小点使用CSS书写（1小时）
8.（编码实战）版本选择页面注意右边的小三角是相对于整个白框存在，因为游戏版本可能还有更多可以翻到下一页，但小三角的位置不会改动（1小时）
9.（编码实战）书写任务的第二个页面：投票（3小时）
10.（知识学习）搜索学习——《html多媒体》（1小时）
11.（编码实战）为投票页面添加音频播放功能（2小时）
12.（编码实战）投票页面注意每个玩家的方块上，hover时会出现4个操作选择（2小时）
13.（编码实战）书写任务的第三个页面：游戏结果（3小时）
14.（知识学习）通过搜索引擎查看并学习CSS半透明是如何实现的（1小时）
15.（编码实战）游戏结果页面注意页脚的底色为半透明，但里面的按钮不会跟着半透明（1小时）
16.（代码重构）根据代码规范优化自己的代码（1小时）
17.（环境搭建）上传到学员服务器（0.5小时）
18.（代码调试）使用不同设备访问网址查看页面（0.5小时）
19.（思考答疑）查看深度思考，学有余力的情况下尝试回答深度思考的问题（1小时）
20.（思考答疑）写日报总结学到的知识点和难点是如何解决的，完成后提交审核（1小时） 

五、验收自己的成果

1.各页面之间css样式没有冲突，也就是跳转后页面布局不会乱
2.按自己的理解，将几个页面之间的链接跳转加上
3.自适应布局，在主流手机上显示没有变形
4.配置nginx，能在pc和手机上正常访问

六、来做一次深度思考

1.什么是CSS sprites？ 点击查看相关小课堂
2.什么是浮动？有哪些清除浮动的方法？ 点击查看相关小课堂
3.rgba和opacity的透明效果有什么不同？display和visiblity有什么区别？ 点击查看相关小课堂
4.描述下z-index和叠加上下文是如何形成的？ 点击查看相关小课堂
5.如果是在手机上查看投票页，没有hover效果时应该怎么办？ 点击查看相关小课堂

七、总结自己的知识图谱

总结任务中遇到的问题困惑和疑难，用自己的语言将学到的知识记录下来