百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

排序
  • 发布时间
  • 浏览量
  • 点赞数
  • 重构代码的重要性2018-05-17 11:39

    不知大家是否有重构代码的习惯,之前我也是没有的,通过参加这次的学习,完成任务后,观看他的代码瞬间觉得要钻进泥土的感觉。 先贴下样例看看: //优化前 var list = document.querySelectorAll("li"); for (var i = i = 0, len = list.length; i < len; i++) { list[i].onclick = function(e) { var t = e.target; …

    1614次浏览123评论
  • 如何记忆这些API2018-05-14 22:53

    这次的任务主要是,获取DOM节点的API的使用,虽说不多,但要熟练使用,你不仅要记住长什么样子(函数名),还得知道使用方式、参数、返回值。接下来说说我的心得。 从使用方式看 这几个方法和属性都通过‘.’操作符访问,‘.’左边是范围,右边是属性,比如: const $section = document.getElementById("section") // 从整个页面范围内获取id为“section”的div。 const $span = $section.getElementsByTagName(“span”) // 从id为“section”的div中获取所有标签名为“span”的…

    982次浏览214评论
  • 事件委托2018-05-13 21:18

    在JavaScript程序中事件处理的数量直接影响了页面的整体性能,当时间处理程序过多时,例如:给100个按钮绑定事件。传统的做法就是:通过DOM操作获取每一个按钮元素分别绑定事件处理函数。 而每一个函数都是一个对象,所以都会占用内存,内存占用的越多性能毋庸置疑的会变得越差;而且每次通过DOM访问到触发事件的元素也无疑会增加交互时间延缓事件处理速度降低性能。而为了尽可能减少这种性能的消耗就引入了事件委托这一解决方案。 所谓事件委托就是利用事件冒泡,指定一个事件处理程序,来管理多个事件。即:利用冒泡机制将一类事件触发尽可能高的委托给其父节点或祖先节点来触发事件处理函数,这样只需要定义一个函数…

    636次浏览100评论
  • 第17到18天笔记2018-05-13 17:40

    记录时间:2018.05.12~2018.05.13  学习总用时:10h 认真的阅读了给出的MDN上JavaScript第一步及JavaScript基础要件 相关内容,一些小练习小测试也亲自动手跟着操作了,收获还是挺多的,然后将其中一些自己不太熟悉还未完全掌握的一些知识点总结到笔记中,方便后面复习查看。 变量 可以通过使用变量的方式来验证这个变量的数值是否在执行环境中已经存在。 “一个变量存在,但是没有数值” 则使用变量会显示undefined,“一个变量并不存在” 使用其时则会报错。 Note: 如果你写一个声明和初始化变量的多行JavaScript代码的程序,你可以在初始化变量之后再实际…

    493次浏览51评论
  • 条件语句 if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码 if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码 if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行 switch 语句 - 使用该语句来选择多个代码块之一来执行if (条件) { 只有当条件为 true 时执行的代码 } if (条件) { 当条件为 true 时执行的代码 } else { 当条件不为 true 时执行的代码 } if (条件 1) { 当条件 1 为 true 时执行的代码 } else if (条件 …

    755次浏览93评论
  • 定位与flex2018-05-12 18:13

    定位 文档流 正常的布局流(在布局介绍文章中提到)是将元素放置在浏览器视口内的系统。默认情况下, 块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上,并且它们的外边距将分隔开它们。 内联元素互相之间以及任何相邻(或被包裹)的文本内容位于同一行上,只要在父块级元素的宽度内有空间可以这样做。如果两个相邻元素都在其上设置外边距,并且两个外边距接触,则两个外边距中的较大者保留,较小的一个消失——这叫外边距折叠 position 静态定位(元素在文档流中的正常位置) position:absolute;(默认值)相对定位(占据正常文档六中的位置) …

    723次浏览20评论
  • js前瞻2018-05-12 17:37

    JavaScript的出现 简单的历史背景 JavaScript语言本身是为了解决90年代初期,差网速条件下的表单验证而生。这么说可能不够形象,我举个例子:在90年初的某一个晚上,你看到某个论坛的内容十分吸引人,然后点击了注册,输入了信息后有个提交,点击提交,接下来的半分钟甚至1~2分钟内,你都将看到的时候那个永无休止的圆圈再转!那是多么的痛苦!那时的表单验证就是这样,52kb的网速,加上往返的验证、request等等,如果是现在,估计10秒的不响应你都会刷新重来,或者认为网络、网页出了问题!因此,Netscape Navigation公司组织研发了livescript脚本语言应对此问题,又恰…

    497次浏览11评论
  • 布局阶段终于差不多算是结束了 因为百度的强大魅力,任务的吸引力等等,我的代码量和熟练程度也是迅速的提升,没有加入这一次学习也就没有对git的详细认识,没有加入这一次学习,就没有对自己代码质量的更高要求和有限认知的认识,以前一直没有提出时间更新自己的博客、记录自己的笔记,在这里终于“强迫”或者“吸引”着自己完成了这些事,虽然前端并不是一个和算法有多亲切的职业,但是我依然从里面感受到了高深的知识和前路的挑战。 因为对自己的严格要求,我去了解了背景历史,我熟练了浮动和定位,模糊的子父级影响也更加清楚,更是将弹性盒模型的了解提升了一个层次,每一次作业都会努力做到友好的、或者为了更友好的网页浏览交互而修…

    1381次浏览53评论
  • Day7_82018-05-11 22:22

    width和height:设置内容框(content box)的宽度和高度。内容框是框内容显示的区域——包括框内的文本内容,以及表示嵌套子元素的其它框。padding: 表示一个 CSS 框的内边距 ——这一层位于内容框的外边缘与边界的内边缘之间。border:CSS 框的边界(border)是一个分隔层,位于内边距的外边缘以及外边距的内边缘之间。边界的默认大小为0——从而让它不可见——不过我们可以设置边界的厚度、风格和颜色让它出现。margin:外边距(margin)代表 CSS 框周围的外部区域,称为外边距,它在布局中推开其它 CSS 框。其表现与 padding 很相似;溢流:overf…

    334次浏览10评论
  • 居中详解2018-05-11 20:43

    说到布局除了浮动以及定位外还有一个不得不提的点,那就是居中,居中问题我们在网页布局当中经常遇到,那么以下就是分为两部分来讲,一部分是传统的居中,另一种则是flex居中,每个部分又通过分为水平垂直居中来讲。 一、传统居中方式 1.1水平居中 1.1.1 inline 对于inline元素以及纯文本只需要为父元素设置text-align: center;适用于 inline, inline-block, inline-table, inline-flex 1.1.2 block 对于block元素则需要为想要居中的block设置margin: 0 auto; 1.1.3 more-block:…

    912次浏览200评论
  • 摆放新大陆2018-05-11 14:31

    笔记时间: 2018.5.11 课程目标: 通过大量练习,来学习布局的各种方式。 课程时长: 12小时,已达标。 学习成果: Position相关概念及使用Postion进行布局的场景和方法 定位允许您从正常的文档流布局中取出元素,并使它们具有不同的行为。 默认的静态定位,意味着块级元素垂直布局,内联元素水平布局,外边距折叠。 相对定位仍占据正常的文档流,通过tblr控制偏移方向(top,bottom,left和right的工作方式——如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。),显示方式仍为原来的display(因没有离开文档流,但当加…

    245次浏览10评论
  • 非常抱歉的地方 因为对于图床概念的疏忽,导致上传的笔记图片都会出现失效问题,但是CSND里的博客都是没有问题的,问题就在于其他博客网站对于用户的图片访问权限设置会造成其他用户访问时反馈403错误,所以,我正在努力用图床替换所有笔记的图片地址,大家如果看到什么不正常的地方,请移步我的CSDN博客:会飞的小鹿,上面有完整的图片解释!抱歉!!! git安装 首先,我们要去git的官网下载一个git安装包,双击到无关紧要的步骤我就不详细描述了,直接介绍我们关键的步骤。 选择git包含的内容和打开方式 选择都很清晰,具体情况我不是很清楚,不过选择中间集成资源管理器的好处是左面右键菜单添加了bash和g…

    622次浏览10评论
  • day11-css图片遮罩层2018-05-10 15:02

    1、将遮罩层html代码与图片放在一个div我是放在 .img_div里。 <div class="img_div"> <img src="./images/paella-dish.jpg"> <a href="#"> <div class="mask"> <h3>A Picture of food</h3> </div> </a> </div> 2、为图片及遮…

    323次浏览01评论
  • PS切图2018-05-10 10:19

    有效的快捷键放大图片:”CTRL” +“+”缩小图片:“CTRL”+ “-”显示隐藏参考线:CTRL”+ “;”移动工具:V合并图层: “CTRL”+ “E”自己设置的快捷键转换为智能对象: ”CTRL” +“,”编辑内容: ”CTRL” +“.”显示隐藏图层:”CTRL” +“/”栅格化图层样式 “SHIFT”+“CTRL”+“P”栅格化图层 “SHIFT”+“CTRL”+“M”重点选择移动工具,并在选项中选中“自动选择”和“图层”方法1、选择图层,右键“转换为智能对象” ,右键“编辑内容”,出现提示框的话直接点击“确定”即可2、photoshop cc 20151)选择“编辑”=》“首选项…

    291次浏览20评论
  • flex和垂直居中2018-05-10 00:16

    flex 主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。该轴的开始和结束被称为 main start 和 main end。 交叉轴(cross axis)是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。 设置了 display: flex 的父元素(在本例中是 <section>)被称之为 flex 容器(flex container)。 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项(flex item)(本例中是 <article&g…

    433次浏览10评论
  • 页面布局2018-05-09 12:30

    日期:2018年5月7日-9日今天的学习总用时:三天今天学习的目标:学习掌握页面布局的各种方式 多栏布局有三种基本的实现方案:固定宽度、流动、弹性。 固定宽度布局的大小不会随用户调整浏览器窗口大小而变化,一般是 900 到 1100像素宽。其中 960 像素是最常见的,因为这个宽度适合所有现代显示器,而且能够被 16、12、10、8、6、5、4 和 3 整除,不仅容易计算等宽分栏的数量,而且计算结果也能得到没有小数的像素数。 流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕,但同时也意味着放弃对页面某些方面的控制,比如随着页面宽度变化,文本行的长度和页面元素之间…

    199次浏览00评论
  • 定位2018-05-09 10:37

    position: static 默认值:将元素放入它在文档布局流中的正常位置 position: relative 相对定位,相对于元素原来的位置移动,偏移前的位置保留。在使用相对定位时,就算元素被偏移了,但是他仍然占据着它没偏移前的空间。 position: absolute;绝对定位的元素不再存在于正常文档布局流程中,不占用空间,原来占用的位置被删除。相对于设置了position:relative或者position:absolute的包含容器为基准定位,元素的margin依然有效,没设置就是相对于根元素定位。浮动元素不同,浮动于正常流中移除,保留部分流动性,会影响后面的内容,文字文字内…

    188次浏览00评论
  • D162018-05-08 07:31

    任务一: 点对应加减乘除按钮的时候,将两个输入框中的数字做对应的算术,并将结果显示在id为result的p标签内。 最初代码 document.getElementById('add-btn').onclick = function () { var result = document.getElementById('first-number').value + document.getElementById('second-number').value; document.getElementById('result').innerHTML = result; } 此…

    524次浏览64评论
  • js基本语法汇总2018-05-07 23:38

    js基本语法汇总1、分类ECMAScript js基本语法与标准DOM Document Object Model文档对象模型BOM Browser Object Model浏览器对象模型2、注释方式style / /body <!-- --!>script // / / /** * js说明文档注释 */ 3、简单指令alert(""); 提示框;confirm(""); 确认框,点击后会响应返回true或false;prompt(); …

    1380次浏览202评论
  • 第九天到第十一天2018-05-06 15:20

    为期三天的任务,是将设计稿转化为网页,利用所学的html和css的知识。 实话说,这对于我而言,真的是一个艰难的任务。简单的看看这次的困难有哪些。 完全没学过ps, 不懂切图 只写过简单的布局demo,对于整站的布局,感到无从下手,(换句话说,这26个字母我都认识,可他们一拼在一起,就不明白了) 页面元素他们各种的属性确定,又如何去进行设置。 当然,再看一下,怎么去解决这些问题的,虽然解决的方法很low,但最终还是写出来了吧。 对于ps, 通过简单的了解切图的步骤,勉强切出了小图片,至于大块的背景图(这里搜索了一下),然后在相应的图层直接导出png。2.如何去确定某个元素的属性值呢,这里就用…

    891次浏览107评论