我们坐在地铁，经常来查看新浪手机新闻，腾讯新闻。或者刷微信看新闻更多功能。你有没有想过如何实现这些目标。移动互联网，更活泼。

因为HTML5到，jQuery Moblie到。今天我用jqm为了给你一个简单的移动新闻网站。

先看效果图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveG10YmxvZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

好吧。我们来看看实现的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>jQuery Mobile伪专家移动新闻</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width"/>

    <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">

	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

	<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

	--><link rel="stylesheet" type="text/css" href="../jQuery/jquery.mobile-1.3.2.min.css">

	<script type="text/javascript" src="../jQuery/jquery-1.8.3.min.js"></script>

	<script type="text/javascript" src="../jQuery/jquery.mobile-1.3.2.min.js"></script>

  	<script type="text/javascript">

  	</script>

  </head>

  <!-- 博客地址：http://blog.csdn.net/xmtblog/article/details/34420755 -->

  <body>

    <div data-role="page" id="onePage">

		<div data-role="header" data-position="fixed" data-theme="b">

			<h1>

				涛哥伪专家移动新闻

			</h1>

		</div>

		<div data-role="content">

			<ul data-role="listview" data-inset="true">

			    <li data-role="list-divider">2014年7月9日16:42:59 <span class="ui-li-count">2</span></li>

			    <li><a href="#">

			    <h2>涛哥伪专家移动新闻</h2>

			    <p><strong>作者：涛哥</strong></p>

			    <p>涛哥伪专家移动新闻成立于2014年7月9日。中国知名企业家涛哥于2012年5月创立的个性化商业资讯站点。涛哥伪专家移动新闻的愿景是：创造让用户更有效率地获取商业资讯并进行交流的方式。

站点内容是由编辑和用户共同筛选。然后再精要加工，走个性化与社会化结合的路线。</p>

			        <p class="ui-li-aside"><strong>6:24</strong>PM</p>

			    </a></li>

			    <li><a href="#">

			    <h2>涛哥伪专家移动新闻</h2>

			    <p><strong>作者：涛哥</strong></p>

			    <p>涛哥伪专家移动新闻成立于2014年7月9日。中国知名企业家涛哥于2012年5月创立的个性化商业资讯站点。

涛哥伪专家移动新闻的愿景是：创造让用户更有效率地获取商业资讯并进行交流的方式。站点内容是由编辑和用户共同筛选。然后再精要加工。走个性化与社会化结合的路线。</p>

			        <p class="ui-li-aside"><strong>9:18</strong>AM</p>

			    </a></li>

			    <li data-role="list-divider">2014年7月9日16:43:10 <span class="ui-li-count">1</span></li>

			    <li><a href="#">

			    <h2>涛哥伪专家移动新闻</h2>

			    <p><strong>作者：涛哥</strong></p>

			    <p>涛哥伪专家移动新闻成立于2014年7月9日。中国知名企业家涛哥于2012年5月创立的个性化商业资讯站点。涛哥伪专家移动新闻的愿景是：创造让用户更有效率地获取商业资讯并进行交流的方式。

站点内容是由编辑和用户共同筛选。然后再精要加工，走个性化与社会化结合的路线。

</p>

			        <p class="ui-li-aside"><strong>4:48</strong>PM</p>

			    </a></li>

			</ul>

		</div>

		<div id="footer" data-role="footer" data-theme="b" data-position="fixed">

			<h1>

				涛哥伪专家移动新闻

			</h1>

		</div>

	</div>

  </body>

</html>

好吧，就到这里，如有兴许新版本号再奉献上。欢迎大家关注我的个人博客！

点击下载：http://download.csdn.net/download/xmt1139057136/7612517

如果不知道，请添加qq组：135430763，共同学习。

手机新闻网站,掌上移动新闻,手机报client,jQuery Mobile手机新闻网站,手机新闻网站demo,新闻阅读器开发的更多相关文章

  1. 手机新闻网站,手持移动新闻,手机报client,jQuery Mobile手机新闻网站,手机新闻网站demo,新闻阅读器开发

    我们坐在地铁.经常拿出新浪手机查看新闻.腾讯新闻,或者看新闻,等刷微信功能.你有没有想过如何实现这些目标. 移动互联网.更活泼. 由于HTML5未来,jQuery Moblie未来. 今天我用jqm的 ...

  2. jQuery Mobile开发的新闻阅读器,适应iphone和android手机

    程序猿都非常赖.你懂的! 我们常常上新浪,腾讯.雅虎等各大站点上面看新闻.他们也都各自推出了自家的手机新闻阅读器.今天我自己使用jQuery Mobile 来实现这一功能.图片大小上传限制了大小250 ...

  3. jQuery Mobile发展新闻阅读器,适应iphone和android打电话

    程序猿是很不赖,你知道. 我们经常新浪,腾讯.雅虎等各大网站看到上述新闻.他们还推出了自己的移动新闻阅读器.今天,我自己用的jQuery Mobile 为了实现这一功能,.图像大小上传限制的大小250 ...

  4. 18个jQuery Mobile开发贴士和教程

    jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持 ...

  5. 八 个优秀的 jQuery Mobile 教程

    jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.虽然j ...

  6. 经典收藏 50个jQuery Mobile开发技巧集萃

    http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...

  7. (转)经典收藏 50个jQuery Mobile开发技巧集萃

    (原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃   ...

  8. jquery.mobile手机网页简要

    先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...

  9. jQuery Mobile手机网站案例

    jQuery Mobile手机网站案例 一.总结 一句话总结:jQuery Mobile是纯手机框架,和amazeui和bootstrap都可以做手机网站. 1.另一款文本编辑器? jd编辑器 二.j ...

随机推荐

  1. Online网站集

    http://tool.oschina.net/apidocs/    在线工具(IT技术工具)

  2. SQLSERVER复制优化之一《减少包大小》

    原文:SQLSERVER复制优化之一<减少包大小> SQLSERVER复制优化之一<减少包大小> 自从搭了复制之后以为可以安枕无忧了,谁不知问题接踵而来 这次遇到的问题是丢包, ...

  3. CodeIgniter连接数据库及快速入门

    原文:CodeIgniter连接数据库及快速入门 一.数据库配置 CodeIgniter 有一个配置文件让你存放数据库连接值(username:用户名,password:密码,database nam ...

  4. 微信JS-SDK“分享信息设置”API及数字签名生成方法（NodeJS版本）

    原文:微信JS-SDK"分享信息设置"API及数字签名生成方法(NodeJS版本) 先上测试地址以示成功: 用微信打开下面地址测试 http://game.4gshu.com/de ...

  5. Javascript学习5 - 函数

    原文:Javascript学习5 - 函数 在Javascript中,函数和对象是交织在一起的.有些函数的特性与对象相关联.这一点的内容在第六部分会讨论到. 这一部分主要讨论函数与其它比较熟悉的语言( ...

  6. Linux GPIO 注册和应用

    Linux GPIO 注册和应用 Linux Kernel, GPIO, ARM 于Linux kernel代码.经常使用 GPIO 作为一个特殊的信号,如芯片片选信号. GPIO 功能应用,我们经常 ...

  7. 栈 <stack>

    STL: pop:完成的仅仅是移除最顶端的数据.如果访问最顶端的数据,需要使用top函数(这个操作通常也被称为peek). #include <stack> #include <cs ...

  8. springmvc4

    web项目(使用html视图解析器)   完整配置springmvc4,最终视图选择的是html,非静态文件. 最近自己配置spring的时候,遇到很多问题,由于开发环境和版本的变化导致网友们给出的建 ...

  9. Android 阅读Manifest在文件Application 在与其他节点meta-data定义自己的数据

    介绍 Android提供meta-date使用键值在实现自己的自定义配置的形式. 通常用作信道标识.它可以用在<application>,<activity>,<acti ...

  10. SpringMVC一路总结（

    SpringMVC一路总结(三) 在博文<SpringMVC一路总结(一)>和<SpringMVC一路总结(二)>中,该框架的应用案例都是是基于xml的形式实现的.然而,对于大 ...