百度前端技术学院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 */}
2) 关于边框扩展(参考资料:来源)
/*形状扩展*/.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的动态绑定数据原理理解加深。
④、正则表达式,说实话,自己之前写过那篇文章大多是理论,当真正遇到正则表达式实践时,有点傻了,需多练习。
⑤、安定了下自己哪颗躁动的心,如果工作上没有什么事做,没什么期盼,又正值金三银四跳槽季,我就在想跳槽了,可是没学到什么东西怎么走?茫然,焦虑,但是这些负情绪没用,只会让自己的状态恶性循环,不如做点实事,哪怕是比较简单的任务。还好自己坚持了下,还好这段时间工作上有几个任务,得到了些许锻炼。
不足及改进:
总结来看,自己做得不够,虽然也花了时间,不过能看出有敷衍的成分在。也好久没产出,虽然写得并不怎么样,不过还是想督促自己多总结,这对自己一定是有利的:)
转载于:https://www.cnblogs.com/wj204/p/6777759.html
百度前端技术学院2017学习总结相关推荐
- 百度前端技术学院,学习第一天。
有基础,所以第一天的了解基本可以跳过. 略.. 转载于:https://www.cnblogs.com/devanwu/p/11149051.html
- 百度前端技术学院25-27学习笔记
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. JavaScript 函数语法 函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionn ...
- 2018年百度前端技术学院学习笔记
对百度前端技术学院心仪已久,今天开始正式学习了,特地开个博客记录今后的学习 学了几个月的前端了,之前也做过一些百度前端学院的练习,终于等到2018年前端学院开始,在开头先立flag,本次前端学院的任务 ...
- 百度前端技术学院--零基础--第二天 给自己做一个在线简历吧
百度前端技术学院–零基础–第二天 给自己做一个在线简历吧 课程目标 通过简单的实践,更加清楚地了解HTML是什么,HTML5是什么.学习基本的HTML标签,理解HTML语义化概念 任务描述 用code ...
- 学计算机前端技术学院,百度前端技术学院(任务)
百度前端技术学院 这一期高档班的标题列表在:ife/2015_spring/taskatmaster·baidu-ife/ife·GitHub下面的高档班(趁便吐槽一下知乎的链接无法识别URL中文锚点 ...
- 百度前端技术学院—斌斌学院题库 转载 cristina-guan
Cristina_Guan https://github.com/CristinaGuan 博客园 首页 新随笔 联系 订阅 管理 随笔 - 34 文章 - 3 评论 - 2 百度前端技术学院-斌 ...
- 百度前端技术学院—斌斌学院题库
任务一:零基础JavaScript编码(一) 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决 ...
- 百度前端技术学院—-小薇学院(HTML CSS课程任务)
任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
- 百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
最新文章
- Windows Server 2003 : 服务器群集
- scrum工具四款可参考
- c语言 swap交换函数_C语言经典100题(14)
- Delphi的类与继承
- MySQL 笔记2 -- MySQL 基础
- MongoRepository findById方法使用示例
- 安装Ubuntu 18.04后的一些操作
- 【渝粤教育】 国家开放大学2020年春季 1039高级财务会计 参考试题
- python自动保存图片_Python学习笔记:利用爬虫自动保存图片
- 区块链2.0——以太坊
- mac 解压_Mac上哪款解压工具好用啊?
- 一题多解(八)—— 矩阵上三角(下三角)的访问
- notepad正则提取
- 音乐播放器 歌词同步滚动功能实现
- postman安装使用教程---图文讲解
- 面向对象:结构化开发方法和面向对象开发方法
- 关于Bmob的一些浅述
- ASCII 控制码说明
- 页面还未加载完成显示loading
- python爬取国家男女比例_用python爬取3万多条评论,看韩国人如何评价韩国电影《寄生虫》?...
热门文章
- 封杀所有Bytespider蜘蛛,太频繁,太操蛋,不杀不行~~~
- tensorflow函数总结
- Access和SQL SERVER两种数据库的直接转换,不需要第三方工具
- html输入框颜色属性,css 修改input输入框属性
- 通过php获取文件后缀名怎么改,【转】PHP获取文件后缀名的几种方法
- mysql为什么使用B+树
- navicat 批量修改列数据
- 027_jdbc-mysql几个常用的日期类型
- 套接字没有连接并且没有提供地址_网络是怎样连接的 -- web服务器接到请求后将会做什么...
- mysql5.6cmd中代码_Mysql5.6.22源代码安装