【初探移动前端开发02】移动设备的页面

前言

上午时候我们简单了解了下用互联网的发展，本来想继续，却被打断了，所以我们现在继续学习吧。

移动设备的页面布局

我们前面一起学习了HTML5新增的很多语义化标签，不知各位还记得吗？这里我们可能需要一起来回顾一下啦。

header

header元素定义文档的页面组合，通常是一些引导和导航信息：

1 <header>

2 <h1>刀狂剑痴叶小钗</h1>

3 <p>一箫一剑平生意，负尽狂名十五年</p>

4 </header>

footer

footer元素定义文档或者章节结尾部分，通常包含一些章节的基本信息（作者、版权信息）：

1 <footer>

3 <p>关于我们 | 联系在下</p>

4 </footer>

nav

nav元素定义为用来构建导航，显示导航链接：

复制代码

1 <footer>

2 <nav>

3 <ul>

4 <li><a href="">私隐信息</a></li>

6 <li><a href="">关于我们</a></li>

7 <li><a href="">联系在下</a></li>

8 </ul>

9 </nav>

10 </footer>

复制代码

PS：我们需要在具有导航功能出使用nav，若是没有导航功能的话还是不要这么干了。

aside

aside元素定义一个页面区域，用来表示包含和页面相关的主要内容，其主要用作非正文内容，广告、侧边栏等。

article

article表示文档，页面用来显示一块独立的文章内容（一则网站新闻、一篇博客）：

复制代码

1 <article>

2 <header>

3 <h1>刀狂剑痴叶小钗</h1>

4 </header>

5 <p>一箫一剑平生意，负尽狂名十五年</p>

6 <footer>

7 <ul>

8 <li>侠影仙踪01</li>

9 <li>侠影仙踪02</li>

10 </ul>

11 </footer>

12 </article>

复制代码

使用article表示一篇叶小钗主题内容：

① header表示头部信息

② p表示主体介绍

③ footer包含与之相关信息

section

section与article容易混淆，用作定义文档中的节比如章节、页眉、页脚或者其它部分：

复制代码

1 <article>

2 <section>

3 <h1>刀狂剑痴叶小钗</h1

4 <p>一箫一剑平生意，负尽狂名十五年</p>

5 </section>

6 <section>

7 <h1>清香白莲素还真</h1

8 <p>朱雀泣血吐丹志</p>

9 </section>

10 </article>

复制代码

以上为我们的主要布局的元素，我们PC上的网页一般是这样的：

该布局在PC上毫无问题，那么我们的移动设备上会是怎么样的呢？

常见移动应用布局

我们的PC与移动端的设备还是有很大区别的：

① 配置问题，毫无疑问手机的配置赶不上电脑，我们还不能太嚣张

② 屏幕大小，屏幕放大缩小的方式小的已经不能接受了，我有时用手机登陆博客园就经常点错。。。

在手机上我们的表现一般是这个样子的：

① header 一些操作按钮、标题

② article 正文区域

③ footer页脚导航

关于这块的页面各位先不要着急，我们后面会做一个滴：）

PS：iphone在原生按钮等美观上做的非常出色，我们这里就来做一个看看：

简单的移动布局

我这里在腾讯微博抓取了最热的一点微博的数据，这里我们进行一点点处理后，用于组成我们的页面吧：）

复制代码

1 <!DOCTYPE html>

2 <html xmlns="http://www.w3.org/1999/xhtml">

3 <head>

4 <title></title>

5 <meta name="viewport" content="initial-scale2.0,width=device-width" />

6 <style type="text/css">

7 * { font-size: 12px; }

8 header { position: fixed; top: 0; width: 100%; background-color: White; }

9 footer { position: fixed; bottom: 0; width: 100%; background-color: White; }

10 input { width: 30%; font-weight: bold; font-size: 14px; }

11 section { margin: 25px 0; }

12 </style>

13 </head>

14 <body>

15 <header>

16 <input type="button" value="刷新" />

17 <input type="button" value="关闭" />

18 <input type="button" value="其它" />

19 </header>

20 <section>

21 <article><h1>四川大桥被冲毁，有多辆车坠河</h1></article>

22 <article><h1>江山中学同学悼念@王琳佳@叶梦圆</h1></article>

23 <article><h1>李宇春确定担任快男总决赛评委</h1></article>

24 <article><h1>围观法院轻判刘志军的三大理由</h1></article>

25 <article><h1>徐静蕾微博求援：谁能教我倒时差</h1></article>

26 <article><h1>@你的生命中的那个贵人</h1></article>

27 <article><h1>济南殡仪馆被曝向警察挟尸要价</h1></article>

28 <article><h1>《盲探》反超小时代获单日票房冠军</h1></article>

29 <article><h1>李承铉戚薇泰国牵手，微博暧昧回应</h1></article>

30 <article><h1>大师帮你画CF漫画</h1></article>

31 <article><h1>上半年电影大PK，是烂片还是经典</h1></article>

32 <article><h1>晒晒你大雨过后的那些逗乐事儿</h1></article>

33 <article><h1>《小时代》还要再搞“三连拍”</h1></article>

34 <article><h1>3男子想吃到正宗羊肉串偷羊50多只</h1></article>

35 <article><h1>二十七八岁时你在做什么</h1></article>

36 <article><h1>冯小刚确定担任春晚总导演</h1></article>

37 <article><h1>航班延误频发，乘客打人袭警不淡定</h1></article>

38 <article><h1>网友直播上海双层观光巴士着火</h1></article>

39 <article><h1>飞越疯人院演中国版，@好友做测试</h1></article>

40 <article><h1>穆雷完胜小德温网夺冠</h1></article>

41 </section>

42 <footer>

43 <input type="button" value="关于我们" />

44 <input type="button" value="联系方式" />

45 <input type="button" value="招聘信息" />

46 </footer>

47 </body>

48 </html>

复制代码

各位将就着看看吧：

http://sandbox.runjs.cn/show/nxenhsy2

丑是丑点，什么都有了嘛。

结语

今天初步入门嘛，我们可能一起打了一点点酱油哈。。。

我们接下来就一起学习jquery mobile啦！！！

本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/p/3180643.html，如需转载请自行联系原作者

【初探移动前端开发02】移动设备的页面相关推荐

视频教程-Web前端开发利器 SPRY框架之页面效果-JavaScript
Web前端开发利器 SPRY框架之页面效果有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
python移动端web开发代码_移动web前端开发,前端开发工作总结,移动端页面开发-我主页-一个前端程序猿的博客...
热门推荐 html/css 一.escape和它们不是同一类简单来说,escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读.编码之后的... 标签: 0 ...
【初探移动前端开发03】jQuery Mobile（上）
前言到目前为止,我打了几天酱油了,这几天落实了工作,并且看了一部电视连续剧(陈道明-手机),我很少看连续剧了,但是手机质量很高啊,各位可以看看. 我们今天先学习一下jquery mobile的基础知 ...
js 刷新页面但是不闪烁_前端开发还在手动刷新页面？手把手教你搭建一个自动刷新工具...
作为一名前端,开发web页面是我们的本职工作.在完成一个页面开发的过程中,保存代码然后手动刷新页面查看效果,这样的动作需要重复无数次,虽然一次这样的动作可能只要花费几秒钟的时间,但是次数多了也挺浪费时 ...
前端开发学习--登录和注册页面设计（html和css，可完成两个页面点击切换）
今天学习了登录和注册页面的设计,主要是HTML和CSS部分,注册和切换采用了Js代码进行,后面将通过js进行填写内容的验证,进而可通过JSP跳转到Servlet进行DAO数据的校验,这属于后端部分了. ...
五分钟带你了解前端开发，以及前端开发的发展机会
前端开发前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术.框架.解决方案,来实现互联网产品的用户界面交互 .它从网页制作 ...
前端开发----简介
目录前端开发 1.提出疑问 2.前端开发应用场景 3.前端开发就业方向 4.前端学习路线 1.前置知识 2.入门阶段 1)HTML 2)CSS 3.JavaScript进阶 4.包管理工具 5.CS ...
重庆市南川隆化职业学校计算机,重庆市第十三届中等职业学校职业技能大赛“web前端开发”赛项在南川隆化职中举行...
5月10日到11日,重庆市第十三届中等职业学校职业技能大赛"web前端开发"赛项在南川隆化职中举行.来自全市39所中职学校的50名教师选手.56名学生选手参加比赛.本次大赛由重庆市 ...
京东商品详情页前端开发宝典
声明:本位来自京东张开涛的微信公众号(kaitao-1234567),授权CSDN转载,如需转载请联系作者. 作者:周琪力,前端工程师,网络常用昵称「keelii」.在过去的4年里主要负责京东网站商品 ...

【初探移动前端开发02】移动设备的页面

【初探移动前端开发02】移动设备的页面相关推荐

最新文章

热门文章