我们讲解下设计第一个移动页面，现在移动端是浏览网站占比很大，小程序，今儿头条，等大部分通过这些搜索相关信息了。所以一个网站的手机版是必不可少的。手机版的和html写法和电脑版的有什么区别呢？
1.定义单页
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基本页面模型</title>
<link href="jquery.mobile/jquery.mobile-1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.mobile/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">页标题</div>
<div data-role="content">页面内容</div>
<div data-role="footer">页脚</div>
</div>
</body>
</html>
demo2
<!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-1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.mobile/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>页标题</h1>
</div>
<div data-role="content">
<p>页面内容</p>
</div>
<div data-role="footer">
<h4>页脚</h4>
</div>
</div>
</body>
</html>
2.定义多页
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多页面模型</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/508/jquery.mobile-1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="//freemuban.com/js/508/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//freemuban.com/js/508/jquery.mobile-1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>新闻早报</h1>
</div>
<div data-role="content">
<p><a href="#new1">jQuery Mobile 1.4.0 Beta发布</a></p>
</div>
<div data-role="footer">
<h4>©2014 jm.cn studio</h4>
</div>
</div>
<div data-role="page" id="new1">
<div data-role="header">
<h1>jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets</h1>
</div>
<div data-role="content">
<p><img src="images/devices.png" style="width:100%" alt=""/></p>
<p>A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. </p>
</div>
<div data-role="footer">
<h4>©2014 jm.cn studio</h4>
</div>
</div>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多页面模型</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/508/jquery.mobile-1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="//freemuban.com/js/508/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//freemuban.com/js/508/jquery.mobile-1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>新闻早报</h1>
</div>
<div data-role="content">
<p><a href="#new1">jQuery Mobile 1.4.0 Beta发布</a></p>
</div>
<div data-role="footer">
<h4>©2014 jm.cn studio</h4>
</div>
</div>
<div data-role="page" id="new1">
<div data-role="header">
<h1>jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets</h1>
</div>
<div data-role="content">
<p><img src="images/devices.png" style="width:100%" alt=""/></p>
<p>A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. </p>
<p><a href="#home">返回首页</a></p>
</div>
<div data-role="footer">
<h4>©2014 jm.cn studio</h4>
</div>
</div>
</body>
</html>
demo3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/508/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<script src="//freemuban.com/js/508/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/508/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>第 1 页</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page2">第 2 页</a></li>
<li><a href="#page3">第 3 页</a></li>
<li><a href="#page4">第 4 页</a></li>
</ul>
</div>
<div data-role="footer">
<h4>页面脚注</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>第 2 页</h1>
</div>
<div data-role="content">
内容
</div>
<div data-role="footer">
<h4>页面脚注</h4>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>第 3 页</h1>
</div>
<div data-role="content">
内容
</div>
<div data-role="footer">
<h4>页面脚注</h4>
</div>
</div>
<div data-role="page" id="page4">
<div data-role="header">
<h1>第 4 页</h1>
</div>
<div data-role="content">
内容
</div>
<div data-role="footer">
<h4>页面脚注</h4>
</div>
</div>
</body>
</html>
3.定义外部页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/508/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<script src="//freemuban.com/js/508/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/508/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>虎嗅网-多点</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="page2.html">看点</a></li>
<li><a href="page3.html">观点</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Copyright © 虎嗅网 ( 京ICP备12013432 ) </h4>
</div>
</div>
</body>
</html>
demo2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/508/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
#page div p img { width: 100%; }
</style>
<script src="//freemuban.com/js/508/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/508/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>微信公众平台该改变了！</h1>
</div>
<div data-role="content">
<p><img src="images/2.jpg" alt=""/></p>
<p>微信的火早已经从APP层面烧到平台层面，这个不用多废话。但是，在运营“山寨发布会”和“如是淼闻”两个数万粉丝的公众号半年、也在接触了不少企业公众帐号开发者之后，淼叔却感觉，微信公众平台似乎还没有做好这个“平台”的准备，这才是今天要说的重点。</p>
<h2>为何说微信公众平台不完善？</h2>
<p>作为一个APP来说，所需要关心的无非是用户数、增长率、留存率、活跃度和ARPU值。但对于将“开放平台”列为三大宗旨（另外两大是沟通和社交）的微信来说，这些指标显然不能满足微信的野心。</p>
<p>……</p>
<h2>建立公开API体系迫在眉睫</h2>
<p>我们可以看一下历史上几个著名的平台。最早的大众领域平台实际上是DOS/Windows系统，在DOS时代，就有了成熟的中断调用体系供第三方程序使用；Windows时代，这一接口进化为API体系。成千上万基于Windows的第三方软件应用成为平台的巨大财富，也帮助Windows巩固了自己的用户群体，在桌面领域逐一击败苹果、IBM、Novell和Linux等挑战者。而在互联网时代，最具商业价值的开放平台是苹果的App Store，这个市场曾被媒体给予了3000亿美元的估值。较为成熟的还有Google/Android平台，Google地图靠着完善的API接口获得了大量第三方应用开发者的青睐，得以嵌入更多LBS应用，成为移动互联网的基础设施级产品。</p>
<p>……</p>
</div>
<div data-role="footer">
<h4>Copyright © 虎嗅网 ( 京ICP备12013432 ) </h4>
</div>
</div>
</body>
</html>
demo3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/508/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
#page div p img { width: 100%; }
</style>
<script src="//freemuban.com/js/508/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/508/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>大数据是互联网金融题中应有之义</h1>
</div>
<div data-role="content">
<p><img src="images/3.png" alt=""/></p>
<p>互联网对金融的变革，总体上来说，可以分为两部分：互联网思想和互联网技术，这两者类似世界观和方法论的关系，是互相辅佐和渗透的。</p>
<p>互联网技术从深层次、具体化的角度解读可以分为：大数据、P2P人人组织网络和两面市场。其中大数据是最重要的因素之一。金融没有类似实物的物理生产、仓储、物流等过程，但其本身是数据的生产、仓储、挖掘、传输、分析和集成。所以大数据对于金融而言，相比其他行业，无疑是有更巨大的影响力。</p>
<p>大数据，是思维、技术与数据的三足鼎立。大数据不仅指规模庞大的数据，它首先是一种思维方式的变化，其次是对这些数据的处理和应用，是数据、处理技术与应用三者的统一的一列处理技术，最后，大数据的前提必然是充裕互通的数据本身。</p>
<p>大数据的思维方式会改变传统金融作业思维，它首先是会改变金融信贷业的抵押文化，推动信用变现成为可能和主流。尤其是中国金融行业，有着根深蒂固的抵押文化，在贷款的过程中严重依赖于抵押物，这是中小企业得不到贷款服务的很重要原因。抵押文化让贷款服务提供方在考量时思维变得简单粗暴。贷款方的考量核心是判断抵押物品的价值，确保有相应的价值空间。比如房产价值200万，那么打个7折，只要保证价值不下跌太厉害，那么就不会产生风险。房价不下跌，风险不大；房价下跌，也是国家的事情，与银行机构无关。</p>
<p>……</p>
</div>
<div data-role="footer">
<h4>Copyright © 虎嗅网 ( 京ICP备12013432 ) </h4>
</div>
</div>
</body>
</html>
