专栏首页业余草移动新闻网站,掌上移动新闻,移动新闻客户端,jQuery Mobile移动新闻网站,移动新闻网站demo,新闻阅读器开发

移动新闻网站,掌上移动新闻,移动新闻客户端,jQuery Mobile移动新闻网站,移动新闻网站demo,新闻阅读器开发

我们坐在地铁上,常常拿出手机查看新浪移动新闻,腾讯新闻,或者刷微信看新闻等等功能。你们有没有想过他们是如何实现的。移动互联网,越来越热闹了。

因为HTML5来了,jQuery Moblie来了。今天我就用jqm来给大家做一个简单的移动新闻网站。

先看效果图:

好吧,我们来看看实现的代码:

<!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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery顶部固定层下拉导航

    最近有人在论坛里讨论怎么制作导航菜单!我关注了一下,这里就写了一个简单的demo。供大家参考。代码如下:

    业余草
  • jQuery Mobile开发的新闻阅读器,适应iphone和android手机

    程序员都很赖,你懂的! 我们经常上新浪,腾讯,雅虎等各大网站上面看新闻,他们也都各自推出了自家的手机新闻阅读器。今天我自...

    业余草
  • HTML5的data-*自定义属性

    HTML5增加了一项新功能是自定义数据属性,也就是data-*自定义属性。在HTML5中我们可以使用以data-为前缀来设置我...

    业余草
  • landmark浅析

    作为WAI-ARIA中的一个角色,landmark作为页面的路标可以使辅助技术客户端方便快捷的在相应的区域 间进行快速切换,并读出辅助信息。 以NVDA为例子,...

    RP道貌不岸然
  • EasyUi 动态tabs 在实际项目中遇到问题与解决方法

    刚开始是把iframe的设置成固定的高度,当把iframe设置成scrolling="auto"时,,这时鼠标移到iframe上会有滚动条,如果设置成scrol...

    tianyawhl
  • 特征锦囊:如何对类别变量进行独热编码?

    很多时候我们需要对类别变量进行独热编码,然后才可以作为入参给模型使用,独热的方式有很多种,这里介绍一个常用的方法 get_dummies吧,这个方法可以让类别变...

    Sam Gor
  • WebApi开启CORS支持跨域POST

    概念:CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHtt...

    Java中文社群_老王
  • 代码覆盖率工具 istanbul

    代码覆盖率工具 istanbul 1. 代码覆盖率 在测试时,我们的用例把所有代码都覆盖了吗? 对于这个问题引出了代码覆盖率的测试指标,一共有以下4种: 行覆盖...

    IMWeb前端团队
  • Slack 的商业模式

    这一切始于2013年,当时斯图尔特·巴特菲尔德(Stewart Butterfield)继续设计了一款名为Glitch的在线游戏。在工作期间,他意识到自己的团队...

    Hyman.W
  • 50亿厂商Slack的前世今生

    Slack是史上增长最快的SaaS创业公司,如今《财富》100强中的企业中有77%都在使用Slack。同时,它还在短短五年间里完成了一项看似不可能完成的任务:让...

    人称T客

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动