(一)对百度前端技术学院2017年春季的参赛学习笔记

去年做了一点IFE的题,今年跟人组队一起参赛,在这里写点笔记记录一下自己遇到的问题及学习心得,不定期更新。

不一定是自己做出来的,很多是队友的功劳,要向他们学习致敬~

热身篇:

现在刚开始报名,2月24号正式上线,有4道热身题。

step1找出下一关的地址:将页面进行全选或控制台element直接找,就发现隐藏的白色地址,问了队友才知道地址使用了base64加密,解密后才进入step2

step2找出‘窗’的高度:页面滚轮显示521,就直接手动调整窗口的高度到521px进入step3(还有别的方法,手动这个是最没技术含量的)

step3css移动字母到指定位置:position:absolute;left/top值慢慢调,其中涉及css3的transform:scale和rotate变换。

  transform:scale(x,y);定义缩放,0.a或1.a表示缩小或放大,1表示不变,-1可以进行翻转

  transform:rotate(angle);定义旋转,单位是deg,-30deg表示逆时针旋转

  transform:scale(x,y) rotate(angle);两个都应用要空格分开写在同一个transform里,分开写后面会覆盖前面的

step4控制小球吃星星:鼠标点击会console出x,y的坐标值,这样利用提示来移动小球,小球ball的API可以利用提示猜出来,也能console出来

  for(var x in ball) {

    console.info(x);

  }

时间: 2024-10-28 05:08:46

(一)对百度前端技术学院2017年春季的参赛学习笔记的相关文章

IFE 百度前端技术学院 2016年春季班作业 第一阶段任务(1-4)的总结

具体任务详细介绍可参考http://ife.baidu.com/task/all 具体代码参考:https://github.com/sunshineqt/webxt/tree/master/stage1 遇见的问题及解决: 任务1: 1 中文乱码 在<head></head>标签内加上<meta charset=”utf-8”>. 2 表单中method属性值 post和get两个属性值,一般选用post,安全性高.get是从服务器上获取数据:post是向服务器传送数

百度前端技术学院任务-01

这两天发现了一个很不错的学习前端的地方:百度前端技术学院. 里面有不同类型的任务,任务之间的难度是递增的,很适合作为练习. 下面是任务-01的代码(并没有涉及到CSS): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度前端技术学院任务-01</title> </head> <bod

百度前端技术学院task1.10

任务十:Flexbox 布局练习 面向人群: 有一定HTML及CSS基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终

百度前端技术学院task1.12

任务十二:学习CSS 3的新特性 面向人群: 初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终没有被我们采纳的方案,同

百度前端技术学院task1.9

任务九:使用HTML/CSS实现一个复杂页面 面向人群: 有一定HTML/CSS基础的同学 难度: 中等 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去

【碎碎念】百度前端技术学院春季班

早上迷迷糊糊被读研阶段的室友的微信叫醒了,邀约组队参加百度前端技术学院春季班(http://ife.baidu.com/),前室友在前端方面还是有一定造诣的,自己本身对前端开发又有一定兴趣,因此准备组团参与下. 想想我的技能树长得确实有点奇葩,最早是做嵌入式的,做了三个月点唱机跑去做产品和实施,跑完了大半个福州高校做某系统推广与实施后觉得做开发的童鞋的Bug有点多就边实施边改代码,久而久之就慢慢转向了开发,想想读研阶段白天上班写C#晚上下班写实验室的Java横向项目的经验也是蛮奇葩的,导致现在我

百度前端技术学院—-小薇学院(HTML+CSS课程任务)

任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终没有被我们采纳的方案,同

百度前端技术学院-task1.3源代码

因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Task1-3</title> <link rel="shortcut icon" href="/sjq_ico.png" /> <style

(作业)百度前端技术学院 任务八:响应式网格(栅格化)布局

百度前端技术学院 任务八:响应式网格(栅格化)布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>IFE Task1-8</title> <style> body{ margin:0; } .container{ box-sizing: border-box; padding: 10px;