百度前端技术学院任务2017（代码请见gh-pages分支）
任务描述：
1.实现任务图示效果（效果基本为下面2、3、4条所描述）；
2.实现文字的流光渐变动画；
3.背景图需要进行模糊处理；
4.实现按钮边框的从中间到两边扩展开。
完成时间：2017-2-26。
完成效果：完成任务所要求效果，对边框扩展的实现使用了两种方法，并使用css3实现了两种另外的效果。
demo：http://smallstarz.com/baidutask-2017/nuomi-task1-mouseSuspending/mouseSuspending.html;
demo代码：https://github.com/smallstar92/baidutask-2017/tree/gh-pages/nuomi-task1-mouseSuspending;
学习笔记：http://smallstarz.com/2017/02/26/baidu2017-nuomitask1-css/;
任务描述：
1.需要使用HTML和CSS实现半圆和四分之三圆环；
2.longding动画页面上下左右剧中；
3.所有的动画元素采用HTML和CSS实现。
完成时间：2017-3-15。
完成效果：按照任务内容完成效果，对于制作圆饼，使用了两种方法实现。
demo：http://smallstarz.com/baidutask-2017/nuomi-task2-loadingcircle/loadingcircle.html;
demo代码：https://github.com/smallstar92/baidutask-2017/tree/gh-pages/nuomi-task2-loadingcircle;
学习笔记：http://smallstarz.com/2017/02/26/baidu2017-nuomitask1-css/;
任务描述：
小薇学院主要是通过练习一些基础任务，达到巩固html/css基础的目的。学院的任务主要来自百度前端技术学院2016，
在2月份的时候，已经完成了百度前端技术学院2016的五个基础任务，通过再一次学习和修改代码，进一步巩固基础。
#任务一：零基础HTML编码
完成时间：2017-3-16。
完成效果：通过此任务，主要了解html各类标签的使用，主要掌握标签语义化，这是html5的主旨之一。
demo：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task1/task_1_2_1.html;
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task1;
#任务二：零基础HTML及CSS编码（一）
完成时间：2017-3-16。
完成效果：通过此任务，主要对css的基础知识进行学习，掌握盒模型、定位等原理。
demo：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task2/task_1_2_1.html;
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task2;
#任务三：三栏式布局
完成时间：2017-3-17。
完成效果：个人认为，三栏式布局除了一般定宽的布局之外，需要了解双飞翼/圣杯布局。在完成本任务时，分别使用了圣杯及双飞翼来实现三栏式，
详请见代码地址。具体两者的使用和区别请见学习报告。
demo1：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task3/shuangfeiyi/task_1_3_1.html;
demo2：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task3/shengbei/task_1_3_1.html;
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task3;
学习笔记：http://smallstarz.com/2017/02/20/baidutask3-css/
#任务四：定位和居中问题
完成时间：2017-3-18。
完成效果：对父元素采用定宽高，设置top/left值和margin-top/margin-left值来居中；此时，由于父元素已定宽高，对于两个子元素，直接使用top/left值即可定位到正确位置。对于子元素，直接设置border-radius值即可达到四分之一圆效果。
demo：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task4/task_1_4_1.html;
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task4;
#任务五：零基础HTML及CSS编码（二）
完成时间：2017-3-18。
完成效果：根据任务描述基本完成效果图样式，其中存在差别的地方在于：我的demo未设置边框阴影效果；此外，header和footer未采用黑色。
对于任务的要求，为保证模块内图片自适应窗口宽度变化，对其宽度设置为百分数值；为保证十张图片完整显示，且随窗口宽度变化自动变化排列以适应，
采用dd列表包含图片，并设置向左漂移；对于这一个问题，还有一个解决思路是，设置其为内联块级元素或者display为自适应伸缩盒（flex）。
demo：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task5/task_1_5_1.html;
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task5;
#任务六：通过HTML及CSS模拟报纸排版
完成时间：2017-3-28。
完成效果：主要通过该任务，对css布局定位/字号设置等进行了学习，目前，已经能够熟悉掌握css/html。在完成过程中遇到的问题：
对段落首字进行下沉时，需要设定其行高等于字体尺寸，否则在某些浏览器里不会达到首字下沉效果；对a标签的url地址等，
需要设置其word-wrap:break-word，否则在某些浏览器里不会有自动强制换行的效果。
demo：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task6/task_1_6_1.html;
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task6;
#任务七：实现常见的技术产品官网的页面架构及样式布局
完成时间：2017-4-1。
完成效果：通过完成本任务，进一步了解html结构/css样式编写，在本任务中使用了部分css3动画效果，让按钮/图片转换等看起来更平滑。
此外，在过程中也发现几处之前不曾注意会出现误差的细节，并且，感觉需要对css选择器的优化进行学习。
demo：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task7/task_1_7_1.html;
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task7;
#任务八：实现常见的技术产品官网的页面架构及样式布局
完成时间：2017-4-4。
完成效果：通过完成本任务，了解栅格化布局，主要使用到@media，此外，对bootstrap使用栅格化的原理进行了了解。
demo：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task8/task_1_8_1.html;
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task8;
#任务九：使用HTML/CSS实现一个复杂页面
完成时间：2017-4-9。
完成效果：通过完成本任务，主要是对html和css进行了综合使用。该页面较复杂，使用到ul（ul的嵌套），table表格（table与其内部tr/td/th等的样式设置），
form表单（表单内select/label/input等元素的样式设置）等元素。在完成过程中，对右边的主体部分采用了上个任务中学习到的栅格化布局思想；
重点熟悉了:nth-child选择器的使用；最后，考虑代码复用的情况，对左侧栏的列表的类名及结构重新进行了设置，
除第一层列表和最后一层列表的类名与中间层列表有少许差别外，中间层列表类名命名进行系统化，如果在后续使用js进行交互的话，可以嵌套多层列表；
对右侧主体几大块区域的元素设置类名的时候，也重新进行了系统化，避免类名太多以致查找困难，设置重复
demo：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task9/task_1_9_1.html;
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task9;
#任务十：Flexbox 布局练习
完成时间：2017-4-10。
完成效果：通过完成本任务，初步对flex伸缩盒进行了学习。了解其一些常用属性的使用方法
demo：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task10/task_1_10_1.html;
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task10;
#以上，对task4-9的小结请见笔记，对flex盒子的学习笔记请见：
task4-9：http://smallstarz.com/2017/04/10/baidu2017-xiaoweixueyuan5to10-html-css/;
task10flex盒子：
任务描述：
彬彬学院主要是通过练习一些基础任务，对js的基础知识进行学习。
#任务一：零基础JavaScript编码（一）
完成时间：2017-4-13。
完成效果：对js基本语法，事件及DOM原理进行学习，任务涉及鼠标点击事件以及一个简单的函数。
demo：http://smallstarz.com/baidutask-2017/binbinxueyuan/task1/task_1_1_1.html;
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/binbinxueyuan/task1;
#任务二：零基础JavaScript编码（二）
完成时间：2017-4-15。
完成效果：本任务涉及的是数组的知识，在任务中使用到filter()，sort()方法，在完成任务过程中对数组的各种方法也进行了学习。
demo：http://smallstarz.com/baidutask-2017/binbinxueyuan/task2/task_1_2_1.html;
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/binbinxueyuan/task2;