我们讲解下设计第一个移动页面，现在移动端是浏览网站占比很大，小程序，今儿头条，等大部分通过这些搜索相关信息了。所以一个网站的手机版是必不可少的。手机版的和html写法和电脑版的有什么区别呢？
我们先看看手机端制作一个类似小说的demo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css">
</style>
</head>
<body>
<div data-role="page" id="home" data-title="首页">
<div data-role="header" data-position="fixed">
<a href="#">返回</a>
<h1>《红楼梦》目录</h1>
<a href="#">设置</a>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page_1">第一回</a></li>
<li><a href="#page_2">第二回</a></li>
<li><a href="#page_3">第三回</a></li>
<li><a href="#page_1">第四回</a></li>
<li><a href="#page_2">第五回</a></li>
<li><a href="#page_3">第六回</a></li>
<li><a href="#page_1">第七回</a></li>
<li><a href="#page_2">第八回</a></li>
<li><a href="#page_3">第九回</a></li>
<li><a href="#page_1">第十回</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1>电子书阅读器</h1>
</div>
</div>
<!--首页-->
<div data-role="page" id="page_1" data-title="第一回">
<div data-role="header" data-position="fixed">
<a href="#home">返回</a>
<h1>第一回</h1>
<a href="#">设置</a>
</div>
<div data-role="content">
<h1>第一回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀</h1>
<h4>僧道谈论绛珠仙草为神瑛侍者还泪之事。僧道度脱甄士隐女儿英莲未能如愿。甄士隐与贾雨村结识。英莲丢失；士隐出家，士隐解“好了歌”。 </h4>
</div>
<div data-role="footer" data-position="fixed">
<h1>《红楼梦》</h1>
</div>
</div>
<!---->
<div data-role="page" id="page_2" data-title="第二回">
<div data-role="header" data-position="fixed">
<a href="#home">返回</a>
<h1>第二回</h1>
<a href="#">设置</a>
</div>
<div data-role="content">
<h1>第二回 贾夫人仙逝扬州城 冷子兴演说荣国府</h1>
<h4>士隐丫头娇杏被雨村看中。雨村发迹后先娶娇杏为二房，不久扶正。雨村因贪酷被革职，给巡盐御史林如海独生女儿林黛玉教书识字。 冷子兴和贾雨村谈论贾府危机；谈论宝玉聪明淘气，常说“女儿是水做的骨肉，男子是泥做的骨肉，我见了女儿便清爽，见了男子便觉浊臭逼人”，谈论邪正二气及大仁大恶之人。 </h4>
</div>
<div data-role="footer" data-position="fixed">
<h1>《红楼梦》</h1>
</div>
</div>
<!---->
<div data-role="page" id="page_3" data-title="第三回">
<div data-role="header" data-position="fixed">
<a href="#home">返回</a>
<h1>第三回</h1>
<a href="#">设置</a>
</div>
<div data-role="content">
<h1>第三回 贾雨村夤缘复旧职 林黛玉抛父进京都 </h1>
<h4>黛玉母逝；贾母要接外孙女黛玉；林如海写信给贾政为雨村谋求复职。 黛玉进贾府，不肯多说一句话，多行一步路，怕被人耻笑。贾母疼爱林黛玉；“凤辣子”出场；王夫人要黛玉不要招惹宝玉；宝黛相会，一见如故。 </h4>
</div>
<div data-role="footer" data-position="fixed">
<h1>《红楼梦》</h1>
</div>
</div>
</body>
</html>
2.BBS界面制作
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed"> <a href="#" data-icon="info">关于</a>
<h1>jQuery Mobile<br>中文社区</h1>
<a href="#" data-icon="home">主页</a> </div>
<div data-role="content">
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">
<li data-role="list-divider">jQuery Mobile开发区</li>
<li> <a href="#">新手入门</a> </li>
<li> <a href="#">开发资料大全</a> </li>
<li> <a href="#">实例教程</a> </li>
<li> <a href="#">扩展插件</a> </li>
<li data-role="list-divider">jQuery Mobile问答区</li>
<li> <a href="#">问题解答</a> </li>
<li> <a href="#">测试专辑</a> </li>
<li data-role="list-divider">jQuery Mobile项目外包</li>
<li> <a href="#">人才招聘</a> </li>
<li> <a href="#">插件交易</a> </li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="gear">注册</a></li>
<li><a href="#" data-icon="check">登录</a></li>
<li><a href="#" data-icon="alert">版规</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
3.设计记事本
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page" id="home" data-title="记事本">
<div data-role="header" data-position="fixed">
<h1>记事本</h1>
<a href="#new" data-icon="custom">新建</a>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#">
<h1>2016/5/1 星期日</h1>
<p>你站在桥上看风景，看风景的人在楼上看你，明月装饰了你的窗子，你装饰了别人的梦。</p>
</a></li>
<li><a href="#">
<h1>2016/5/2 星期一</h1>
<p>从明天起，做一个幸福的人，喂马，劈柴，周游世界；从明天起，关心粮食和蔬菜；我有一所房子，面向大海，春暖花开</p>
</a></li>
<li><a href="#">
<h1>2016/5/3 星期二</h1>
<p>参观科技馆</p>
</a></li>
<li><a href="#">
<h1>2016/5/4 星期三</h1>
<p>在家休息，读书</p>
</a></li>
<li><a href="#">
<h1>2016/5/5 星期四</h1>
<p></p>
</a></li>
<li><a href="#">
<h1>2016/5/6 星期五</h1>
<p>外出活动</p>
</a></li>
<li><a href="#">
<h1>2016/5/7 星期六</h1>
<p>郊游</p>
</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="new" data-title="新建记事本">
<div data-role="header" data-position="fixed">
<h1>新建记事本</h1>
<a href="#home" data-icon="back">返回</a>
</div>
<div data-role="content">
<form>
<label for="note">请输入内容:</label>
<textarea name="note" id="note" style="height:100%; min-height:200px"></textarea>
</form>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="arrow-u">保存</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
