百度前端技术学院task1.10
2016-03-20 20:16
197 查看
任务十:Flexbox 布局练习
面向人群:有一定HTML及CSS基础的同学难度:中
课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的。因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案,同样也可以帮助我们学到很多知识。所以,我们列出的参考资料未必是实现需求所必须的。有的时候,实现题目的要求很简单,甚至参考资料里就有,但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时,要多思考,多提问,多质疑。相信通过和小伙伴们的交流,能让你的学习事半功倍。
屏幕宽度小于 640px 时,调整 Flexbox 的属性以实现第四个元素移动到最前面的效果,而不要改动第一个元素的边框颜色与高度实现效果图。
思考 Flexbox 布局和网格布局的异同,以及分别适用于什么样的场景。可以搜索一下别人的结论,不过要保持思辨的态度,不可直接接受别人的观点。
HTML 及 CSS 代码结构清晰、规范
各自完成任务实践
交叉互相Review其他人的代码,建议每个人至少看一个同组队友的代码
相互讨论,最后合成一份组内最佳代码进行提交
图解 CSS3 Flexbox 属性:看完这两篇,对 Flexbox 的了解就够了,多实践一下,理解会更深刻
Flexbox——快速布局神器
使用 CSS 弹性盒
MDN flex属性
面向人群:有一定HTML及CSS基础的同学难度:中
重要说明
百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践。课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的。因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案,同样也可以帮助我们学到很多知识。所以,我们列出的参考资料未必是实现需求所必须的。有的时候,实现题目的要求很简单,甚至参考资料里就有,但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时,要多思考,多提问,多质疑。相信通过和小伙伴们的交流,能让你的学习事半功倍。
任务目的
学习如何flex进行布局,学习如何根据屏幕宽度调整布局策略。任务描述
需要实现的效果如效果图(点击打开)所示,调整浏览器宽度查看响应式效果,红色的文字是说明,不需要写在 HTML 中。任务注意事项
只需要完成HTML,CSS代码编写,不需要写JavaScript屏幕宽度小于 640px 时,调整 Flexbox 的属性以实现第四个元素移动到最前面的效果,而不要改动第一个元素的边框颜色与高度实现效果图。
思考 Flexbox 布局和网格布局的异同,以及分别适用于什么样的场景。可以搜索一下别人的结论,不过要保持思辨的态度,不可直接接受别人的观点。
HTML 及 CSS 代码结构清晰、规范
任务协作建议
团队集中讨论,明确题目要求,保证队伍各自对题目要求认知一致各自完成任务实践
交叉互相Review其他人的代码,建议每个人至少看一个同组队友的代码
相互讨论,最后合成一份组内最佳代码进行提交
在线学习参考资料
Flexbox详解:了解 Flexbox 属性的含义图解 CSS3 Flexbox 属性:看完这两篇,对 Flexbox 的了解就够了,多实践一下,理解会更深刻
Flexbox——快速布局神器
使用 CSS 弹性盒
MDN flex属性
相关文章推荐
- 关于HTML
- seajs的使用
- 解决在weblogic(可能与之无关)下jsp通过post传递中文内容表单乱码问题
- 再看《JavaScript高级程序设计》第6-7章
- 浅谈JavaScript的作用域
- 第二周学习JS感受
- [Offer收割]编程联赛1-B 优化延迟
- 用纯CSS3绘制26个英文字母
- DHTML对象
- JSP脚本中的9个内置对象
- angularjs控制器之间通信,事件通知服务
- JavaScript中的typeof和instanceof
- web前端的三个重要部分
- [Offer收割]编程联赛1-A 九宫问题
- AngularJS入门之动画
- HTML第三章作业
- Html第三章作业
- js实现随机的四则运算题目(2)-更新界面
- JavaScript表单编程
- 【BZOJ1014】[JSOI2008]火星人prefix【Splay】【Hash】