百度前端技术学院task1.10
- 面向人群:
- 有一定HTML及CSS基础的同学
- 难度:
- 中
重要说明
百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践。
课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的。因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案,同样也可以帮助我们学到很多知识。所以,我们列出的参考资料未必是实现需求所必须的。有的时候,实现题目的要求很简单,甚至参考资料里就有,但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时,要多思考,多提问,多质疑。相信通过和小伙伴们的交流,能让你的学习事半功倍。
任务目的
- 学习如何flex进行布局,学习如何根据屏幕宽度调整布局策略。
任务描述
- 需要实现的效果如效果图(点击打开)所示,调整浏览器宽度查看响应式效果,红色的文字是说明,不需要写在 HTML 中。
任务注意事项
- 只需要完成HTML,CSS代码编写,不需要写JavaScript
- 屏幕宽度小于 640px 时,调整 Flexbox 的属性以实现第四个元素移动到最前面的效果,而不要改动第一个元素的边框颜色与高度实现效果图。
- 思考 Flexbox 布局和网格布局的异同,以及分别适用于什么样的场景。可以搜索一下别人的结论,不过要保持思辨的态度,不可直接接受别人的观点。
- HTML 及 CSS 代码结构清晰、规范
任务协作建议
- 团队集中讨论,明确题目要求,保证队伍各自对题目要求认知一致
- 各自完成任务实践
- 交叉互相Review其他人的代码,建议每个人至少看一个同组队友的代码
- 相互讨论,最后合成一份组内最佳代码进行提交
在线学习参考资料
- Flexbox详解:了解 Flexbox 属性的含义
- 图解 CSS3 Flexbox 属性:看完这两篇,对 Flexbox 的了解就够了,多实践一下,理解会更深刻
- Flexbox——快速布局神器
- 使用 CSS 弹性盒
- MDN flex属性
百度前端技术学院task1.10的更多相关文章
- 百度前端技术学院-task1.10源代码
任务十的源代码,其实有github的,但就是不知道怎么弄,近期会学会的.在IE和firefox上检测运行良好. <!DOCTYPE html> <html lang="en ...
- 百度前端技术学院-task1.3源代码
因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> < ...
- 百度前端技术学院-task1.8源代码以及个人总结
通过这次任务的练习我学到了很多,现将所学到的以及遇到的问题总结如下. 源码地址:http://pan.baidu.com/s/1kVB2VZL 下面出现的代码,都是摘自这个上面的源码 1.终于明白了a ...
- 百度前端技术学院-task1.8源代码
主要是不采用bootstrap实现网格. 遇到的困难及注意点如下: 1.[class*='col-'],这个是选择col-开头的类,第一次用,以前也只是看到过: 2.媒体查询,总觉得容易理解错误.@m ...
- 百度前端技术学院task1 总结
1.居中:当使用text-align或者vatical-align无法达到居中的时候,如果知道元素的大小,可以采用先设为left或right为50%,再设置margin-left或者margin-ri ...
- 百度前端技术学院-task1.4源代码
任务描述 实现如 示例图(点击打开) 的效果 灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角. 任务注意事项 思考不同情况下(如灰色高度是根据内容动态变化的)水平垂直居中的解决方案. 动手 ...
- 百度前端技术学院(IFE)2016春季学期总结
今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
- 百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
- 通过Github Pages在线查看百度前端技术学院完成的任务成果
前言 .note-content {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHe ...
随机推荐
- jQuery遍历 - 过滤first(),last()和eq()使用
jQuery遍历 - 过滤最基本的过滤方法是first(),last()和eq(),它们允许您根据元素在一组元素中的位置选择特定元素. 其他过滤方法(如filter()和not())允许您选择与特定条 ...
- php从数据库里取出的数据列表里添加一个属性实战例子
php从数据库里取出的数据列表里添加一个属性实战例子:$opendata = $this->omitmodel->getHistory(1,1);var_dump($opendata);f ...
- MySQL 的一些批处理
执行 SQL 脚本文件(https://blog.csdn.net/vebasan/article/details/7619911): mysql –u root –p 123456 < scr ...
- vue-组件化开发基础
组件化开发基础.分为三个步骤: 创建组件构造器对象 注册组件 使用组件 <!DOCTYPE html> <html lang="en"> <head& ...
- vue学习指南:第四篇(详细) - vue的 :class 和 :style
1. :class = “a” 说明 vue 中有个叫 a 的属性 这个标签的class 就是 a的值 2. :class = “{ active:isactive }” Active的存在取决于 i ...
- [PHP] 最简单的权限控制设计
假设url部分我们只有action和method , 某个控制器下的某个方法 , 比如:log/loginlog 查看日志下的登陆日志, action就是log , method就是loginlo ...
- Linux /proc/$pid部分内容详解【转】
转自:https://www.cnblogs.com/likui360/p/6181927.html auxv /proc/[pid]/auxv包含传递给进程的ELF解释器信息,格式是每一项都是一个u ...
- 09、日志轮转+rsync同步
logrotate - rotates, compresses, and mails system logs 日志轮转 rotate 日志切割 轮转 切割 备份 归档 常见 ...
- XGBoost和LightGBM的参数以及调参
一.XGBoost参数解释 XGBoost的参数一共分为三类: 通用参数:宏观函数控制. Booster参数:控制每一步的booster(tree/regression).booster参数一般可以调 ...
- 201871010102-常龙龙《面向对象程序设计(java)》第八周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...