面向人群：
有一定HTML及CSS基础，想要尝试移动开发
难度：
中

重要说明

百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。

课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。

任务目的

  • 进行移动开发时的HTML及CSS实践
  • 掌握移动Web开发在页面架构和布局的方法及差异性
  • 掌握移动Web开发页面调试的方法

任务描述

任务注意事项

  • 本任务只涉及 HTML 及 CSS
  • 实现的页面和设计图在iOS Safari，微信，Android浏览器中均基本一致
  • HTML 及 CSS 代码结构清晰、规范
  • 尝试在适合的地方使用CSS 3中的flex布局
  • 有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次

任务协作建议

  • 团队集中讨论，明确题目要求，保证队伍各自对题目要求认知一致
  • 各自完成任务实践
  • 交叉互相Review其他人的代码，建议每个人至少看一个同组队友的代码
  • 相互讨论，最后合成一份组内最佳代码进行提交

在线学习参考资料

任务十一：移动Web页面布局实践的更多相关文章

  1. SiteMesh：一个优于Apache Tiles的Web页面布局、装饰框架

    一.SiteMesh项目简介 OS(OpenSymphony)的SiteMesh是一个用来在JSP中实现页面布局和装饰(layout and decoration)的框架组件,能够帮助网站开发人员较容 ...

  2. Web页面布局方式小结

    Web页面是由块元素组成的,正常情况下块元素一个个按垂直方向排布,构成了页面.可是这样的主要的布局方式绝大多时候不能满足我们的需求,所以各种布局方式应运而生,本文就对这些布局方式做个小结. 1.元素漂 ...

  3. 响应式WEB页面开发实践

    转自:https://github.com/markyun/My-blog/issues/27 最近得到一个新任务单,让我用一套页面适应所有主流终端(Android.iPhone.iPad.PC),而 ...

  4. web页面布局思想

    一.盒子模型 网页可以看成由一个个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商品分类).中(主要部分).右,这些版 ...

  5. 移动端WEB页面

    百度前端技术学院第一阶段任务十一,关于移动端WEB页面布局,参考资料如下(都是一些网页链接): MDN:手机网页开发 MDN:在移动浏览器中使用viewport元标签控制布局 移动前端开发和 Web ...

  6. HTML5-03 页面布局

    概述 HTML 文档中的元素是一个接着一个排列的,只是简单地在在块级元素的前后加上拆行,是一种流水布局.但是,我们所见到的 Web 页面按照一定的规则布局排版的(通常是多列的),所以就要借助一定的方法 ...

  7. HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  8. 比float更好的页面布局inline-block

    一:页面布局的发展过程 桌格设计 表格+css div+css的浮动布局 div+css的内联块布局 二:流行多年的浮动布局的优劣 优势: div+css浮动布局的优势,主要是相对于table布局来说 ...

  9. 如何在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 ...

随机推荐

  1. 在指定的ChartArea中显示Series

    WinForm的Chart有Series, ChartArea,输出图表就往Serie里扔数据就可以了,很方便是吧.我原想Area和serie有上下级关系,可是我错了,Area和Serie并没有上下级 ...

  2. 单片机C基本编程规范

    为了提高源程序的质量和可维护性,从而最终提高软件产品生产力,特编写此规范.本标准规定了程序设计人员进行程序设计时必须遵循的规范.本规范主要针对单片机编程语言和08编译器而言,包括排版.注释.命名.变量 ...

  3. react native的Navigator组件示例

    import React, {Component} from 'react';import {ScrollView, StyleSheet, Text, View, PixelRatio} from ...

  4. Tinghua Data Mining 7

    SVM B分割得更加无偏 比较公平 卡着分界面的点叫支持向量,就好比托着分界面 支持向量决定了可移动的范围,这个范围就叫margin 分界面可移动的距离 前提是先要被分对 对偶问题一般是不等价的,但是 ...

  5. 剑指offer部分编程题

    一 斐波那契数列 题目描述: 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项. n<=39 问题分析: 可以肯定的是这一题通过递归的方式是肯定能做出来,但是这样会有 ...

  6. ASP.NET MVC 复制MVC项目代码到同一个项目的时候报错The request for ‘home’ has found the following matching controll

    ASP.NET MVC 复制MVC项目代码到同一个项目的时候报错The request for ‘home’ has found the following matching controll “/” ...

  7. chrome浏览器之网络面板

    这篇指导向你展示怎样检测网络张状况或者在chrome开发工具的网络面板中尽可能的优化网页. 排列的或受阻的请求 症状:同时发出六个请求.之后有一系列的请求排队或受阻.一旦最先的六个请求中有一个响应结束 ...

  8. 初学者应该怎么学习前端？web前端的发展路线大剖析！

    写在最前: 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础知识,而且要学会运用 ...

  9. thinkphp分页集成

    控制器: $User = M('webcase'); //  实例化 User 对象 $list = $User->order('id desc')->page($_GET['p'].', ...

  10. # Volley源码解析（二） 没有缓存的情况下直接走网络请求源码分析#

    Volley源码解析(二) 没有缓存的情况下直接走网络请求源码分析 Volley源码一共40多个类和接口.除去一些工具类的实现,核心代码只有20多个类.所以相对来说分析起来没有那么吃力.但是要想分析透 ...