您的位置：首页 > Web前端

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

2013-07-10 10:58 316 查看

前言

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

移动设备的页面布局

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

header

header元素定义文档的页面组合，通常是一些引导和导航信息：
1 <header>
2     <h1>刀狂剑痴叶小钗</h1>
3     <p>一箫一剑平生意，负尽狂名十五年</p>
4 </header>

footer

footer元素定义文档或者章节结尾部分，通常包含一些章节的基本信息（作者、版权信息）：
1 <footer>
2     <p>私隐信息 | 版权所有</p>
3     <p>关于我们 | 联系在下</p>
4 </footer>

nav

nav元素定义为用来构建导航，显示导航链接：
1 <footer>
 2     <nav>
 3         <ul>
 4             <li><a href="">私隐信息</a></li>
 5             <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啦！！！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航