返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: dw入门 >

手机端定义单页,多页,外部页

2020-05-08 文章标签: 手机端 浏览次数:

我们讲解下设计第一个移动页面,现在移动端是浏览网站占比很大,小程序,今儿头条,等大部分通过这些搜索相关信息了。所以一个网站的手机版是必不可少的。手机版的和html写法和电脑版的有什么区别呢?

HTML5教程

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>


关于我们 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。