百度前端技术学院2017学习总结

一、前言

百度的前端技术学院IFE，2016年就听说了，当时自己也报名，还组成队伍了，不过自己一个任务也没完成就结束了，遗憾... 关注了IFE，知道2017年2月有新的一期培训，于是一直在等着报名，然后开始做里面发布的任务（o(╯□╰)o，这次能这么积极是因为自己哪段时间工作闲，为了按捺自己躁动的心，告诉自己抓住这次机会，去完成里面发布的任务，沉淀一下。）

现在这一期到4月24号就结束了，虽然完成的任务不算多，但是在这过程中还是学到了东西，中途差点因为懒，没有坚持下来，想了下自己当时定的要求，想到应该善始善终，就战胜了一下‘懒’，最后成绩是积分74，勉强入了下学霸的分享榜单（虽然并没有什么卵用，不过还满足了下自己的虚荣心┑(￣Д ￣)┍）），废话了这么多，总结下自己学到的东西吧。

二、完成任务总结

2.1 用背景图和伪元素方式实现自定义checkbox，radio样式

2.1.1 任务描述：http://ife.baidu.com/course/detail/id/23

2.1.2 实现过程：

原生的checkbox,radio样式不能改变，所以<input type="checkbox" id="checkBox"> 不再适用。这里要用到HTML5的label标签

HTML5中的label标签为 input 元素定义标签（label），标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来。

如：

<input type="checkbox" id="checkBox">
<label for="checkBox"></label>

注意：
"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

接着要把input元素设置为display:none;然后通过css将label设置为自定义的样式

label {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #d9d9d9;
    border-radius: 50%;
    position: relative;
}

这是设置为外面的圆圈，里面的圆通过::after伪类设置

label::after {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    top: 4px;
    left: 4px;
    z-index: 1;
    content: '';
}

如果是checkbox，外面是正方形，对应里面是对钩

label {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #d9d9d9;
    position: relative;
}

"√"对钩制作：

label::after {
    border: 2px solid #d73d32;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg); 
}

这里提一下伪类和伪元素的区分：

1）伪类：存在的意义是为了通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息。伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。

常用的伪类：

:active    向被激活的元素添加样式。    
:focus    向拥有键盘输入焦点的元素添加样式。    
:hover    当鼠标悬浮在元素上方时，向元素添加样式。    
:link    向未被访问的链接添加样式。    
:visited    向已被访问的链接添加样式。    
:first-child    向元素的第一个子元素添加样式。    
:checked 向选中的控件元素添加样式

2）伪元素:伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）；

注意: css3为了区分伪类和伪元素，规定伪类前面有一个冒号，伪元素前面有两个冒号

常用伪元素:

::before 为作用元素的第一个子节点插入dom中
::after 为作用元素的最后一个子节点插入dom中

同：都是通过选择器为元素添加样式
异：伪元素会创建一个元素，但不是真正的Html元素，伪类相当于为一个元素创建一个class样式

2.2 有趣的鼠标悬浮模糊效果

2.2.1 任务描述：http://ife.baidu.com/course/detail/id/14

2.2.2 实现过程：

先看下做出的效果：点我看看

1）关于图片模糊（参考资料：来源）

主要用到CSS3 filter（滤镜）属性

语法：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

所以图片上hover时可以加一个这样的效果：

 .wrap:hover .blur {
      transition: all .5s ease;
      filter: url(blur.svg#blur);  /* FireFox, Chrome, Opera */
      -webkit-filter: blur(10px); /* Chrome, Opera */
      -moz-filter: blur(10px);
      -ms-filter: blur(10px);    
      filter: blur(10px); 
      /*filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);  IE6~IE9 */
    }

关于边框扩展（参考资料：来源）

    /*形状扩展*/
    .border::before, .border::after {
      content:" ";
      display: block;
      position: absolute;
      width: 0;
      height: 0;  
      box-sizing: border-box;
      transition-property: height,width,left,top;
      transition-duration: 0.5s;
      transition-timing-function: ease-in;
    }
    .border::before {
      height: 100%;
      left: 50%;
    }
    .wrap:hover > .border::before {
      left: 0;
      width: 100%;
      border: 6px solid #000;
      border-left-color: transparent;
      border-right-color: transparent;
    }
    .border::after {
      width: 100%;
      top: 50%;
    }
    .wrap:hover > .border::after {
      height: 100%;
      top: 0;
      border: 4px solid #000;
      border-top-color: transparent;
      border-bottom-color: transparent;
    }

主要通过border:6px solid #000这个属性，当width和height都设置为100%时，把左右或上下的border设置为transparent就可以实现::after和::before拼装成长方形，两边都是从中间扩展，所以最初left和top设置为50%；最后需要注意 transition-property: height,width,left,top;的设置。

3）文字渐变光影流动动画（参考资料：来源）

.text-gradient {  
        display: inline-block;
        color: black;
        font-size: 10em;
        background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        -webkit-animation: masked-animation 4s infinite linear;
    }
    @-webkit-keyframes masked-animation {
        0%  { background-position: 0 0;}
        100% { background-position: -100% 0;}
    }

要注意的是：
①、-webkit-background-clip: text;
background-clip 属性规定背景的绘制区域。
语法：

background-clip: border-box|padding-box|content-box;

值对应于：背景被裁剪到边框盒，内边距框，内容框。
这里用到的text只适用于chrome浏览器。
②、background-size: 200% 100%;
让背景图片大小水平方向扩大一倍，这样background-position才有移动与变化的空间。

2.3 动态数据绑定

2.3.1 任务描述：http://ife.baidu.com/course/detail/id/15 （对应后面有二、三、四、五）
2.3.2 实现过程：
Vue如何实现动态数据绑定，这个在之前有写过一篇这样的文章：http://www.cnblogs.com/wj204/p/6423478.html
虽然以前有研究过，不过这次跟着任务做的时候可以看出自己还是理解得不透彻，这里不再详细分解了，自己在任务上也做了点笔记：http://ife.baidu.com/note/detail/id/1233

2.4 正则表达式入门

2.4.1 任务描述：http://ife.baidu.com/course/detail/id/29
2.4.2 实现过程:
感觉自己挑了自己有点熟悉的任务，因为之前有写过一篇正则表达式的文章：https://segmentfault.com/a/1190000008766125 (/ □ ) 当作复习把，因为这些基础知识掌握得并不牢固。

2.4.2.1 手机号码匹配

/*
  电话号码前三位规则:
  联通:186 185 170 156 155 130 131 132
  移动:139 138 137 136 135 134 178 188 187 183 182 159 158 157 152 150 147
  电信:189 180 170 153 133
  第一位全是1
  第二位：3 4 5 7 8
  第三位:0 1 2 3 4 5 6 7 8 9
*/

所以正则表达式可以写为：(/^1[34578][0-9]{9}$/g)

2.4.2.2 判断输入的字符串是否有相邻重复单词的正则表达式可写为：/(b[a-zA-Z]+b)s+1b/g
解释这个正则表达式：
①、 (b[a-zA-Z]+b) 是一个捕获分组，它捕获所有的单词：

" asd sf  hello hello asd".match(/(b[a-zA-Z]+b)/g) // ["asd", "sf", "hello", "hello", "asd"]

②、s加了一个空格限制条件，所以最后一个单词被排除：

" asd sf  hello hello asd".match(/(b[a-zA-Z]+b)s/g)  ["asd ", "sf ", "hello ", "hello "]

③、"1"后向引用：

" asd sf hello hello asd".match(/(b[a-zA-Z]+b)s+1b/g) ["hello hello"]

2.5 CSS3实现3D 轮播图

2.5.1 任务描述：http://ife.baidu.com/course/detail/id/51
2.5.2 实现过程：因为自己之前有写过一些纯css3实现的动画 http://www.cnblogs.com/wj204/p/css3_demo.html
所以选了这个任务，说实话，又“水分”了（捂脸哭）

2.6 position:sticky 实现粘性布局

额外技能点总结，缘起别人的提问 https://segmentfault.com/q/1010000008800350/a-1020000008801739
想到之前看过的一篇文章 http://www.cnblogs.com/coco1s/p/6402723.html （平时看些技术文章还是有用的，虽然当时可能没起什么作用，不过有个知识点印象。）

<div style="position: fixed;background:red;height:500px;width:500px;overflow:auto;top: 50%;
    transform: translateX(-50%) translateY(-50%);
    left: 50%;">
  <div style="position: absolute;background:black;height:10px;width:10px;top:0;right:0"></div>
  <div style="height:5000px">
    213123123213123123213123123213123123213123123
  </div>
</div>

将黑色的div框样式改为粘性布局

<div style="position: sticky;background:black;height:10px;width:10px;top:0;left:100%"></div>

效果：

三、总结

收获：

①、巩固基础知识
②、css属性应用更加熟练，说实话，之前after和before伪元素自己用得不多，一般都会重新加标签来设置样式，不过这里用过之后，自己简直喜欢上了这两个东西，感觉方便好多。
③、对Vue的动态绑定数据原理理解加深。
④、正则表达式，说实话，自己之前写过那篇文章大多是理论，当真正遇到正则表达式实践时，有点傻了，需多练习。
⑤、安定了下自己哪颗躁动的心，如果工作上没有什么事做，没什么期盼，又正值金三银四跳槽季，我就在想跳槽了，可是没学到什么东西怎么走？茫然，焦虑，但是这些负情绪没用，只会让自己的状态恶性循环，不如做点实事，哪怕是比较简单的任务。还好自己坚持了下，还好这段时间工作上有几个任务，得到了些许锻炼。

不足及改进：

总结来看，自己做得不够，虽然也花了时间，不过能看出有敷衍的成分在。也好久没产出，虽然写得并不怎么样，不过还是想督促自己多总结，这对自己一定是有利的:)

posted @ 2017-05-11 09:30 wj704 阅读(979) 评论(0) 编辑收藏举报

刷新页面返回顶部

Eraser's blog :)

好好活，就是做有意义的事 ♪((^o^)♪

百度前端技术学院2017学习总结

一、前言

二、完成任务总结

2.1 用背景图和伪元素方式实现自定义checkbox，radio样式

2.2 有趣的鼠标悬浮模糊效果

2.3 动态数据绑定

2.4 正则表达式入门

2.5 CSS3实现3D 轮播图

2.6 position:sticky 实现粘性布局

三、总结

公告

Eraser's blog :)

好好活，就是做有意义的事 ♪~~((*^o^*)~~♪

百度前端技术学院2017学习总结

一、前言

二、完成任务总结

2.1 用背景图和伪元素方式实现自定义checkbox，radio样式

2.2 有趣的鼠标悬浮模糊效果

2.3 动态数据绑定

2.4 正则表达式入门

2.5 CSS3实现3D 轮播图

2.6 position:sticky 实现粘性布局

三、总结

公告

好好活，就是做有意义的事 ♪((^o^)♪