1.前言百度前端技术学院IFE，2016年听说的，当时也报名了，组了队，结果一单没完成就结束了任务，不幸的是……关注了IFE，知道2017年2月会有新的培训班，所以就一直等着报名，然后就开始做贴在上面的任务了(o(╯□╰)o，这次是因为我的角色所以很活跃为了压抑我那颗不安分的心，我告诉自己要抓住这个机会，完成贴在上面的任务，安定下来。）现在这期4月24号就结束了，虽然完成的任务还不算太多很多，但我还是在这个过程中学到了一些东西。差点没坚持下来，因为半途偷懒。我想了想我当时定下的要求，觉得应该好好开始，好好结束，所以我战胜了“懒惰”。最后的分数是74分，勉强进入了下学霸的分享榜（虽然没用，但还是满足了我的虚荣心┑(￣Д￣)┍）），废话这么多，总结一下自己的所学吧。2.完成任务总结2.1使用背景图和伪元素实现自定义checkbox，radio样式2.1.1任务描述：http://ife.baidu.com/course/d...2.1.2实现过程：native复选框和单选样式无法更改，因此不再适用。这里使用了HTML5的label标签。HTML5中的label标签定义了输入元素的标签（label）。注意：“for”属性可以将标签绑定到另一个元素上。请将“for”属性的值设置为相关元素的id属性的值。然后将输入元素设置为display:none；然后通过csslabel{display:inline-block;将标签设置为自定义样式宽度：16px；高度：16px；边框：1px实心#d9d9d9；边界半径：50%；position:relative;}这个设置为外圈，内圈通过::after伪类label::after{-webkit-transition:all.5sease;-moz-transition:所有.5s轻松;-o-transition:所有.5s轻松；-ms-transition:所有.5s轻松；过渡：所有.5s轻松；游标：指针；位置：绝对；宽度：8px；高度：8px；边界半径：50%；顶部：4px；左：4px；z-索引：1；content:'';}如果是checkbox，外面是正方形，里面是钩子标签{display:inline-block;宽度：16px；高度：16px；边框：1px实心#d9d9d9；position:relative;}"√"hookproduction:label::after{border:2pxsolid#d73d32;边框顶部：无；右边界：无；变换：旋转（-45deg）；}这里是伪类和伪元素的区别：1）伪类：存在的意义是通过选择器找到DOM树中不存在的信息和常规CSS选择器无法获得的信息。伪类以冒号:开头，后跟伪类的名称和括在括号中的可选参数。常用的伪类：:active为激活的元素添加样式。:focus向具有键盘输入焦点的元素添加样式。:hover当鼠标悬停在元素上时向元素添加样式。:link为未访问的链接添加样式。:visited为已访问的链接添加样式。:first-child将样式添加到元素的第一个子元素。:checked为选中的控件元素添加样式2）伪元素：伪元素在DOM树中创建一些抽象元素，这些抽象元素在文档语言中是不存在的（可以理解为html源码）；注意：css3为了区分伪类和伪元素，规定伪类前面有一个冒号，伪元素前面有两个冒号。常用的伪元素::before是action元素插入dom的第一个子节点::after是action元素的最后一个子节点插入dom相同：通过选择器给元素添加样式不同：伪-elements会创建一个元素，但不是真正的Html元素，伪类相当于为一个元素创建类样式2.2有趣的鼠标悬停模糊效果2.2.1任务说明：http://ife.baidu.com/course/d...2.2.2实现过程：先看效果：点我看1）关于模糊图片（参考：来源）主要用到CSS3滤镜（filter）属性语法：filter:none|模糊（）|亮度（）|对比（）|阴影（）|灰度（）|色调旋转（）|反转（）|不透明度()|饱和（）|棕褐色（）|url();blur(px)为图像设置高斯模糊。“radius”的值设置了高斯函数的标准差，也就是屏幕上有多少像素混合在一起，所以值越大越模糊；如果没有设置值，默认为0；这个参数可以设置css长度值，但是不接受Percentage值。所以你可以在图片上悬停时添加这样的效果：.wrap:hover.blur{transition:all.5sease;过滤器：url（blur.svg#blur）；/*FireFox,Chrome,Opera*/-webkit-filter:blur(10px);/*Chrome,Opera*/-moz-filter:blur(10px);-ms-过滤器：模糊（10px）；过滤器：模糊（10px）；/*过滤器：progid：DXImageTransform.Microsoft。模糊（像素半径=10，MakeShadow=false）；IE6~IE9*/}2)关于边框扩展(参考：source)/*形状扩展*/.border::before,.border::after{content:"";显示：块；位置：绝对；宽度：0；高度：0；框大小：边框框；过渡属性：高度、宽度、左侧、顶部；过渡持续时间：0.5s；缓入；}.border::before{高度：100%；左：50%；}.wrap:hover>.border::before{left:0;宽度：100%；边框：6px实心#000；-左颜色：透明；右边框颜色：透明；}.边框：：AF之三{宽度：100%；顶部：50%；}.wrap:hover>.border::after{高度：100%；顶部：0；边框：4px实心#000；边框顶部颜色：透明；边框底部颜色：透明；}主要是通过border:6pxsolid#000属性，当宽高都设置为100%时，将左右或上下边框设置为透明，实现::after和::beforeRectangle的组装，两边都是从中间延伸出来的，所以初始left和top设置为50%；最后需要注意transition-property的设置：height,width,left,top；3）文字渐变光影流动动画（参考：source）.text-gradient{display:inline-block;颜色：黑色;字体大小：10em；背景图像：-webkit-linear-gradient（左，#147B96，#E6D20525%，#147B9650%，#E6D20575%，#147B96）；-webkit-text-fill-color：透明；-webkit-背景剪辑：文本；-webkit-背景大小：200%100%；-webkit-animation:masked-animation4s无限线性；}@-webkit-keyframesmasked-animation{0%{background-position:00;}100%{background-position:-100%0;}}注意什么是：①,-webkit-background-clip:text;background-clip属性指定了背景的绘制区域。语法：background-clip:border-box|padding-box|content-box;值对应于：背景被裁剪到边框框、填充框、内容框。此处使用的文字仅适用于chrome浏览器。②、背景尺寸：200%100%；将背景图片横向放大一倍，使背景位置有移动和改变的空间。2.3动态数据绑定2.3.1任务说明：http://ife.baidu.com/course/d...（对应以下二、三、四、五）2.3.2实现过程：Vue如何实现动态数据绑定，我之前写过一篇这样的文章：http://www.cnblogs.com/wj204/...虽然之前也研究过，但是这次看到按照任务的时候还是看懂了是不透彻，这里就不细细分解了，任务上也做了一些笔记：http://ife.baidu.com/note/det...2.4正则表达式简介2.4.1任务描述:http://ife.baidu.com/course/d...2.4.2实现过程：感觉选了一个自己比较熟悉的任务，因为之前写过正则表达式的文章：https://segmentfault.com/a/11...(/□)作为复习，因为基础知识没有牢牢掌握。2.4.2.1手机号码匹配/*号码前三位规则：中国联通：186185170156155130131132中国移动：139138137136135134178188187183182159158157182147电信：0137133第一位全为1第二位：34578第三位：0123456789*/所以正则表达式可以写成：(/^1[34578][0-9]{9}$/g)2.4.2.2判断输入字符串是否有相邻重复词的正则表达式可以写为：/(b[a-zA-Z]+b)s+1b/g解释这个正则表达式：①,(b[a-zA-Z]+b)是一个捕获组，它捕获所有的单词："asdsfhellohelloasd".match(/(b[a-zA-Z]+b)/g)//["asd","sf","hello","hello","asd"]②,s加了空格限制，所以最后一个词被排除："asdsfhello你好asd".match(/(b[a-zA-Z]+b)s/g)["asd","sf","hello","hello"]③,"1"backreference:"asdsfhellohelloasd".match(/(b[a-zA-Z]+b)s+1b/g)["hellohello"]2.5CSS3实现3D轮播image2.5.1任务描述：http://ife.baidu.com/course/d...2.5.2实现过程：因为之前写过一些纯css3的动画http://www.cnblogs.com/wj204/...所以我选择了这个任务，说实话，又是“滋润”（捂脸哭）2.6position:sticky实现粘性布局总结额外技能点，是由于别人的提问https：//segmentfault.com/q/10...想起之前看过的一篇文章http://www.cnblogs.com/coco1s...（平时看一些技术文章还是有用的，虽然不一定当时没有任何效果，但我有知识的印象。）
