wen1ling / ife.baidu_notes

百度前端技术学院的任务

Home Page:http://ife.baidu.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

IFE(百度前端技术学院)学习记录

其实很早就报了名,后来没有看,现在开始做点记录。

零基础_task2

第二天:给自己做一个在线简历吧

这个目录存放了零基础学院task2关于个人简历的任务文件,task2_note.md为在这次任务中对HTML及其语义化的学习笔记。效果1效果2

实现效果

  • HTML5部分语义化及其布局
  • 两种纯HTML个人简历的模板。

零基础_task3

第三天:让简历有点色彩

这个目录存放了零基础学院task3关于在task2基础上用css增加色彩的任务文件,task3_note.md为本次任务对css简单的学习笔记,包括背景、文本、字体等简单应用。效果

实现效果

并没有特别新颖的地方。

零基础_task4

第四天,背景边框列表链接和更复杂的选择器

这个目录存放了零基础学院task4关于在背景边框列表链接和选择器的任务文件,task4_note.md为本次对css链接、列表、边框、轮廓的学习笔记。效果

实现效果

简单而又不错的边框、边距效果(圆角边框、阴影等),简历模型初步完成。

零基础_task5

第五天和第六天:三种简历

这个目录存放了零基础学院task5关于三种简历的任务文件,task5_note.md是本次对CSS框模型、浮动、定位元素、透明度、简单伪类和微元素的学习笔记。效果,由于懒而且不喜欢copy,所以默认只默认显示了第三种的简历,但是F12自己修改为2或者3查看其他两个样式的结果。

实现效果


初步实现了不更改HTML文件的情况下修改CSS而能适用的情况,定义尺寸方面不足。

原图样式太一般,加了个圆角,

零基础_task6

第七天到第八天:学习布局

这个目录存放了零基础学院task6关于布局的任务文件,task6_note.md为对用户界面、弹性盒子等的学习笔记。效果

实现效果

只是实现静态界面,并没有轮播图之类,等到后面再回来修改。

零基础_task7

第九天到第十一天:来做一个漂亮的网站

这个目录存放了零基础学院task7关于复杂页面布局的任务文件,task7_note.md是对目前主流布局(包括两列式和三列式)的学习笔记。效果,切片掌握,对于布局方式有了一定能力

实现效果

总体实现,部分布局在分辨率更改情况下容易出位,但是,手机访问没有问题。使用有弹性盒子布局(flex)、float,关于鼠标移动过去虽然能显示,但是图片变暗未实现,还有一些实现自认为不错的想法。

零基础_task8

第十二天到第十五天,复杂页面实现

这个目录存放了零基础学院task8关于复杂页面布局的任务文件,task8_note.md为对布局最后的一些归纳的学习笔记。效果,对于布局有了很不错的理解。

实现效果

总体是按照要求做的,部分有所改动(因为电脑分辨率和提供psd不一样),先分左边两边,进行两栏式布局,然后分别再进行两栏式布局,效果还算不错,但手机观感不是很好,因为大框架左边是固定宽度。值得一提的是很多可以css实现的都未用图标所代替。鼠标经过图片的css未做完。(官网维护,可以先休息几天了)

零基础_task9

第十六天,开始感受JS的乐趣

这个任务来源于零基础学院task9,关于js的初步使用,task9_note.md是对JavaScript最基本的语法(包括变量、运算符、输出、语句、函数和事件)的学习笔记,运算是js对加减乘除的简单运算页面,个人简历是对在零基础taks_4的基础是进行修改而成的。

实现效果

加减乘除较为简单,不再赘述,而个人简历增加了随机背景颜色生成。

零基础_task10

第十七天到第十八天,“如果”可以“重来”

这个任务来源于零基础学院task10,关于js的初步使用,task10_note.md是对JavaScript基础第二部分(包括数据类型、对象、DOM和一些常用库)的学习笔记,运算是基于task9改进的,dec2bin是10进制转二进制的应用。编码练习是包括三个任务点(根据时间打招呼、3的小游戏和乘法表)。

实现效果

运算毕竟简单,不再赘述,

  • dec2bin是要求十进制转二进制,网上大多使用int>>>1的方式解决,而既然是为了编码练习,就换了一种方式,通过通用算法,不断除2拿到余数形成的数字,由于与实际二进制位置颠倒,采用转化数组再用reverse反转数组再转回String类型,即可得到结果,当然在步骤中不乏有判断正整数、反转数字、固定位数等函数。
  • index.html则是任务练习的最后三个汇总,前两个都比较简单,不再赘述,最后一个题目要求是九九乘法表,但是js做有点大材小用,于是参考前面的产生了根据输入然后生成乘法表的想法。html写table标签即可,js根据输入数据先在table标签生成需要数量的tr,再在tr下生成td,在tr下生成td较为麻烦,需要两个循环;这样表格生成完成,但是样式过丑,选择了在生成td时候加上className属性,这样再写个css文件算是较为完美。

当然,这次作业也有瑕疵,js生成的html内容在连续点击会在后面继续生成,相当于多次调用事件生成函数,观看其他大佬作品,有的选择通过将生产内容内嵌到某一标签,这样即使再次生成用户也不会有感觉,但感觉不算太完美,所以

零基础_task11

第十九天:找到那个DOM

这个任务来源于零基础学院task11,关于js中DOM的使用,这个任务较为简单,笔记与task10笔记合并,IFE ECMAScript为展示,记得是在console自行调用函数。

About

百度前端技术学院的任务

http://ife.baidu.com/


Languages

Language:HTML 73.2%Language:CSS 23.6%Language:JavaScript 3.2%