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



我们经常新浪，腾讯。雅虎等各大网站看到上述新闻。他们还推出了自己的移动新闻阅读器。今天，我自己用的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. Windows Server时间服务器配置方法

    1 时间服务器经常会碰到客户端机器需要和服务器在时间上保持同步,否则会出现各种问题,特别是有时间相关的触发功能的时候. 为解决各设备间时间统一的问题,我们可在网络中设置一台服务器使其作为基准时间,其它 ...

  2. 如何收集 EBS 各种相关业务的表的数据

    1. Receiving 相关 參照 Note: 402245.1, 跑 rcv11i_sa.sql 就能够, 输入 po number, 其余默认. 參照 Note: 1294177.1, 假设上面 ...

  3. java 短信验证码===随机数

    生成验证码,验证码生成 String mobile = phone;// 手机号码,多个号码使用","分割 // 生成随机6位码 String s = ""; ...

  4. 大话设计模式C++达到-文章12章-外观模式

    一.UML画画 关键词:添加Facade层. 二.概念 外观模式:为子系统中的一组接口提供一个一致的界面.此模式定义了一个高层接口,这个接口使得这一子系统更加easy使用. 三.说明 Q:外观模式在什 ...

  5. Kruskal(克鲁斯卡尔)

    设有一个有n个顶点的连通网N={V,E},最初先构造一个只有n个顶点, 没有边的非 连通图 T={V, E}, 图中每个顶点自成一个连通分量. 当在E中选到一条具有最小权值的边时,若该边的两个顶点落在 ...

  6. Drupal 7 电子邮件的发送设置 SMTP, Mail System, Mime Mail

    尽管Drupal自带发送email功能,可是非常多server须要SMTP验证.这个时候就须要安装 SMTP 模块. 激活 SMTP 模块 进入配置 admin/config/system/smtp ...

  7. veridata实验例（3）验证veridata发现insert操作不会导致同步

    veridata实验例(3)验证veridata发现insert操作不会导致同步 续接:<veridata实验举例(2)验证表BONUS与表SALGRADE两节点同步情况>,地址:点击打开 ...

  8. log4j 实例 ， 浅析

    一.新建log4j.propperties,放在工程的src目录下. #fileAppender log4j.rootCategory = DEBUG,file,consoleAppender log ...

  9. Java EE (4) -- Java EE 6 Java Persistence API Developer Certified Expert(1z0-898)

    Overview of the Java Persistence API Describe the basics of Object Relational Mapping (ORM) Define t ...

  10. 建立Hibernate二级Cache

    建立Hibernate二级Cache它需要两个步骤:首先,一定要使用什么样的数据并发策略,然后配置缓存过期时间,并设置Cache提供器. 有4种内置的Hibernate数据并发冲突策略,代表数据库隔离 ...