任务十一:移动Web页面布局实践
- 面向人群:
- 有一定HTML及CSS基础,想要尝试移动开发
- 难度:
- 中
重要说明
百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践。
课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的。因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案,同样也可以帮助我们学到很多知识。所以,我们列出的参考资料未必是实现需求所必须的。有的时候,实现题目的要求很简单,甚至参考资料里就有,但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时,要多思考,多提问,多质疑。相信通过和小伙伴们的交流,能让你的学习事半功倍。
任务目的
- 进行移动开发时的HTML及CSS实践
- 掌握移动Web开发在页面架构和布局的方法及差异性
- 掌握移动Web开发页面调试的方法
任务描述
- 实现与 设计图(点击查看) 一致的移动端Web页面
任务注意事项
- 本任务只涉及 HTML 及 CSS
- 实现的页面和设计图在iOS Safari,微信,Android浏览器中均基本一致
- HTML 及 CSS 代码结构清晰、规范
- 尝试在适合的地方使用CSS 3中的flex布局
- 有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次
任务协作建议
- 团队集中讨论,明确题目要求,保证队伍各自对题目要求认知一致
- 各自完成任务实践
- 交叉互相Review其他人的代码,建议每个人至少看一个同组队友的代码
- 相互讨论,最后合成一份组内最佳代码进行提交
在线学习参考资料
- MDN:手机网页开发
- MDN:在移动浏览器中使用viewport元标签控制布局
- 移动前端开发和 Web 前端开发的区别是什么
- Alloyteam移动开发规范概述
- 手机/移动前端开发需要注意的20个要点
- w3cplus响应式技术资源
- 浅谈移动Web开发
- Alloyteam Mars
- 移动WEB开发入门
- 移动开发资源集合
- The Mobile Web Handbook
- MobileWeb 适配总结
- 移动前端不得不了解的html5 head 头标签
任务十一:移动Web页面布局实践的更多相关文章
- SiteMesh:一个优于Apache Tiles的Web页面布局、装饰框架
一.SiteMesh项目简介 OS(OpenSymphony)的SiteMesh是一个用来在JSP中实现页面布局和装饰(layout and decoration)的框架组件,能够帮助网站开发人员较容 ...
- Web页面布局方式小结
Web页面是由块元素组成的,正常情况下块元素一个个按垂直方向排布,构成了页面.可是这样的主要的布局方式绝大多时候不能满足我们的需求,所以各种布局方式应运而生,本文就对这些布局方式做个小结. 1.元素漂 ...
- 响应式WEB页面开发实践
转自:https://github.com/markyun/My-blog/issues/27 最近得到一个新任务单,让我用一套页面适应所有主流终端(Android.iPhone.iPad.PC),而 ...
- web页面布局思想
一.盒子模型 网页可以看成由一个个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商品分类).中(主要部分).右,这些版 ...
- 移动端WEB页面
百度前端技术学院第一阶段任务十一,关于移动端WEB页面布局,参考资料如下(都是一些网页链接): MDN:手机网页开发 MDN:在移动浏览器中使用viewport元标签控制布局 移动前端开发和 Web ...
- HTML5-03 页面布局
概述 HTML 文档中的元素是一个接着一个排列的,只是简单地在在块级元素的前后加上拆行,是一种流水布局.但是,我们所见到的 Web 页面按照一定的规则布局排版的(通常是多列的),所以就要借助一定的方法 ...
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
- 比float更好的页面布局inline-block
一:页面布局的发展过程 桌格设计 表格+css div+css的浮动布局 div+css的内联块布局 二:流行多年的浮动布局的优劣 优势: div+css浮动布局的优势,主要是相对于table布局来说 ...
- 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]
如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...
随机推荐
- string.Format 处理 double 的问题
出处: http://www.cnblogs.com/albert-struggle/archive/2012/05/22/2512744.html 1.格式化货币(跟系统的环境有关,中文系统默认格式 ...
- C# interface 的特性 无法被implement class继承
最近做interface添加特性后,implement class 无法继承. 微软要求class是实现Interface而不是继承,所以我们必须手动添加特性,而不能自动继承. 对于abstract ...
- IT兄弟连 JavaWeb教程 Servlet会话跟踪 Session优缺点
● 数据存储在服务器,安全. ● session能保存Object类型数据,也就是说能存储任意数据. ● 可存储的数据大小,理论上是无限制的. ● 因为数据存储在服务器端,当用户比较多时,会占 ...
- 阿里云物联网 .NET Core 客户端 | CZGL.AliIoTClient:3. 订阅Topic与响应Topic
文档目录: 说明 1. 连接阿里云物联网 2. IoT 客户端 3. 订阅Topic与响应Topic 4. 设备上报属性 4.1 上报位置信息 5. 设置设备属性 6. 设备事件上报 7. 服务调用 ...
- vmware vSAN 入门
参考:https://docs.vmware.com/cn/VMware-vSphere/6.5/com.vmware.vsphere.virtualsan.doc/GUID-18F531E9-FF0 ...
- iOS 7:漫谈#define 宏定义(转)
iOS :漫谈#define 宏定义 #define宏定义在C系开发中可以说占有举足轻重的作用.底层框架自不必说,为了编译优化和方便,以及跨平台能力,宏被大量使用,可以说底层开发离开define将寸步 ...
- python操作redis之String操作
# __author__ = 'STEVEN' import redis,time # 方式1,直接链接操作 # r = redis.Redis(host='192.168.43.22',port=6 ...
- 大数加法 HDU 1002
#include <iostream> #include <cstring> #include <string> #include <cstdio> # ...
- DWR+Spring配置使用
一.DWR介绍 DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端 ...
- 关于如何在其他包中写controller和简单介绍@SpringBootApplication
本文参考博客:https://blog.csdn.net/u013473691/article/details/52353923 关于@Configuration和@Bean参考博客:https:// ...