程序猿是很不赖，你知道。



我们经常新浪，腾讯。雅虎等各大网站看到上述新闻。他们还推出了自己的移动新闻阅读器。今天，我自己用的jQuery Mobile 为了实现这一功能，。图像大小上传限制的大小250*400第一眼iphone作用于：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveG10MTEzOTA1NzEzNg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" height="400" width="250">



再看看android上的效果：





OK，很完美,是我想要的结果。直接上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

<style type="text/css">

	.ui-icon-msg {background:url('../jquery.mobile-1.3.2/images/icons-msg.png') no-repeat 0 0;}

</style>

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

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

</head>

<body>

<div data-role="page">

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

 	<a href="#" data-role="button" data-icon="home" data-iconpos="notext">首页</a>

    <h1>伪专家新闻</h1>

  	<a href="#" data-role="button" data-icon="msg" data-iconpos="notext">信息</a>

  </div>

  <div data-role="content">

       <ul data-role="listview">

		  <li>

		    <a href="#">

		    <img src="../images/chrome.png">

		    <h2>Google Chrome</h2>

		    <p>Google Chrome 免费的开源 web 浏览器。公布于 2008 年。</p>

		    </a>

		  </li>

		  <li>

		    <a href="#">

		    <img src="../images/firefox.png">

		    <h2>Mozilla Firefox</h2>

		    <p>Firefox 是来自 Mozilla 的 web 浏览器。公布于 2004 年。</p>

		    </a>

		  </li>

		   <li>

		    <a href="#">

		    <img src="../images/opera.png">

		    <h2>Opera</h2>

		    <p>是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。公布于1995年。</p>

		    </a>

		  </li>

		 <li>

		    <a href="#">

		    <img src="../images/aoyou.png">

		    <h2>傲游浏览器</h2>

		    <p>傲游浏览器是一款多功能、个性化多标签浏览器。公布于 2012年。

</p>

		    </a>

		  </li>

		    <li>

		    <a href="#">

		    <img src="../images/netscape.png">

		    <h2>Netscape</h2>

		    <p>网景浏览器（Netscape ）是一个是由 Netscape 通信公司开发的网页浏览器。公布于 1994 年。</p>

		    </a>

		  </li>

		   <li>

		    <a href="#">

		    <img src="../images/liebao.png">

		    <h2>猎豹安全浏览器</h2>

		    <p>猎豹安全浏览器。是由金山网络技术有限公司推出的一款浏览器。公布于2012 年。

</p>

		    </a>

		  </li>

		    <li>

		    <a href="#">

		    <img src="../images/taobao.png">

		    <h2>淘宝浏览器</h2>

		    <p>淘宝浏览器，支持快捷登录淘宝网及旗下站点，提供多重安全防护浏览器。

公布于 2012 年。</p>

		    </a>

		  </li>

		    <li>

		    <a href="#">

		    <img src="../images/baidu.png">

		    <h2>百度浏览器</h2>

		    <p>百度浏览器，以APP打造个性化应用平台,一款简洁轻快的浏览器。公布于 2011 年。

</p>

		    </a>

		  </li>

		</ul>

  </div>

  <div data-role="footer" data-position="fixed">

    <h1>伪专家新闻</h1>

  </div>

</div>

</body>

</html>

这里仅仅列出了部分代码，假设须要看完整代码，请点击下载：http://download.csdn.net/download/xmt1139057136/7436463

如有不懂，请加QQ团：135430763。一起学习！欢迎关注我的博客！

版权声明：本文博主原创文章，博客，未经同意不得转载。

jQuery Mobile发展新闻阅读器,适应iphone和android打电话的更多相关文章

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

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

  2. （android高仿系列）今日头条 --新闻阅读器 （三） 完结 、总结 篇

    从写第一篇今日头条高仿系列开始,到现在已经过去了1个多月了,其实大体都做好了,就是迟迟没有放出来,因为我觉得,做这个东西也是有个过程的,我想把这个模仿中一步一步学习的过程,按照自己的思路写下来,在根据 ...

  3. （android高仿系列）今日头条 --新闻阅读器 （二）

    高仿今日头条 --- 第一篇:(android高仿系列)今日头条 --新闻阅读器 (一)    上次,已经完毕了头部新闻分类栏目的拖动效果. 这篇文章是继续去完好APP 今日头条  这个新闻阅读器的其 ...

  4. Android 仿 新闻阅读器 菜单弹出效果（附源码DEMO）

    这一系列博文都是:(android高仿系列)今日头条 --新闻阅读器 (一) 开发中碰到问题之后实现的,觉得可能有的开发者用的到或则希望独立成一个小功能DEMO,所以就放出来这么一个DEMO. 原本觉 ...

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

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

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

    我们坐在地铁,经常来查看新浪手机新闻,腾讯新闻.或者刷微信看新闻更多功能.你有没有想过如何实现这些目标.移动互联网,更活泼. 因为HTML5到,jQuery Moblie到.今天我用jqm为了给你一个 ...

  7. 使用jQuery Mobile实现新闻浏览器（3）

    在本教程的前两篇文章中,笔者分别向大家介绍了使用jQuery Mobile框架如何去设计手机新闻浏览器,其中实现了一个WEB版本的新闻浏览器,在本教程的最后一篇中,将讲解如何将已实现的web版本的新闻 ...

  8. RSS新闻阅读器

    1.RSS格式结构 http://rss.sina.com.cn/blog/tech/kj.xml <?xml version="1.0" encoding="ut ...

  9. 五个最佳RSS新闻阅读器

    文章出自http://www.williamlong.info/archives/1591.html 在博客和在线新闻充斥的互联网上,大量信息已经使得用户阅读量过载,幸运的是,通过RSS Feed提供 ...

随机推荐

  1. C#文件流写入方法

    stream为服务端接收的文件流 var bytes = new byte[stream.Length]; stream.Read(bytes, 0, bytes.Length); // 设置当前流的 ...

  2. 关于Opencv2.4.x中stitcher类的简单应用

    1.opencv2.4以上版本有stitcher类,可以简单方便的实现图像的拼接,目前只是简单的测试一下stitcher类的拼接功能,也是纠结了好长时间,最终发现是要在链接库中加上opencv_sti ...

  3. poj3264（线段树区间求最值）

    题目连接:http://poj.org/problem?id=3264 题意:给定Q(1<=Q<=200000)个数A1,A2,```,AQ,多次求任一区间Ai-Aj中最大数和最小数的差. ...

  4. Knockout应用开发指南 第二章：监控属性(Observables)

    原文:Knockout应用开发指南 第二章:监控属性(Observables) 关于Knockout的3个重要概念(Observables,DependentObservables,Observabl ...

  5. Jndi使用好处，与简单实例【JBOSS】

    JNDI是 Java 命名与目录接口(Java Naming and Directory Interface),在J2EE规范中是重要的规范之一,不少专家认为,没有透彻理解JNDI的意义和作用,就没有 ...

  6. 解压system.img

    解压: All-Series:~$ simg2img system.img system.img.ext4 All-Series:~$ mkdir tmp All-Series:~$ mount -t ...

  7. FusionCharts參数中文说明

    FushionCharts是把抽象数据图示化的套件,使用方便,配置简单.其相关參数中文说明例如以下. 功能特性 animation                    是否动画显示数据,默觉得 1( ...

  8. php如何判断用户是从指定页面跳转进来的

    $_SERVER['HTTP_REFERER']下'HTTP_REFERER' 引导用户代理到当前页的前一页的地址(如果存在).由 user agent 设置决定.并不是所有的用户代理都会设置该项,有 ...

  9. 基于MVC3下拉列表联动（JQuery）

    上次项目中遇到一个需要多个下拉列表联动的操作,今天有空将实现方式整理以便以后参考. 要达到的效果是,点击一个下拉框,则另一个下拉框的值发生对应变化.如:选择中国,则另个一下拉框里显示中国各个省份. 传 ...

  10. POJ 2536 Gopher II（二分图的最大匹配）

    题目链接:http://poj.org/problem?id=2536 题意:已知有n仅仅老鼠的坐标,m个洞的坐标,老鼠的移动速度为V,S秒以后有一仅仅老鹰要吃老鼠,问有多少个老鼠被吃. 非常明晰,二 ...