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

程序员都很赖,你懂的!

我们经常上新浪,腾讯,雅虎等各大网站上面看新闻,他们也都各自推出了自家的手机新闻阅读器。今天我自己使用jQuery Mobile 来实现这一功能。图片大小上传限制了大小250*400先看看iphone上的效果:

再看看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,共同学习!欢迎大家关注我的博客!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/1617771.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

递归算法学习——全排列

目录 ​编辑 一&#xff0c;问题描述 1.例子&#xff1a; 题目接口&#xff1a; 二&#xff0c;问题分析和解决 1.问题分析 2.解题代码 一&#xff0c;问题描述 首先我们得来先看看全排列的问题描述。全排列问题的问题描述如下&#xff1a; 给定一个不含重复数字的数组 n…

2023年流行编曲软件哪个好用?flstudio有免费的吗 flstudio免费插件都有哪些

2023年流行的主流宿主编曲软件哪个好用&#xff0c;现在几款流行的主流宿主编曲软件包括FL Studio、Cubase、Pro Tools、Sonar、Logic Pro、Studio One等等。 对于新手学习来说我个人更推荐FL Studio 21&#xff0c;为什么说FL Studio 21 适合新手呢&#xff1f;自然是有道理的…

免费音频转换器,畅享音乐无边界。这些软件助你一键转换

嘿&#xff01;你是否有过这样的经历&#xff0c;当你想在特定设备上播放自己珍藏的音频时&#xff0c;却发现文件格式不兼容而无法播放&#xff1f;别灰心&#xff0c;我有个小秘诀要告诉你——音频格式转换&#xff01;通过将音频文件转换为适当的格式&#xff0c;你可以轻松…

Harbor 私有仓库迁移博客

文章目录 一.私有仓库迁移的介绍1.为何要对Harbor 私有仓库的迁移2.Harbor 私有仓库的迁移特点3. Harbor 私有仓库的迁移注意要点 二.私有仓库迁移配置1.源Harbor配置&#xff08;192.168.198.11&#xff09;&#xff08;1&#xff09;接着以下操作查看容器状况及是否可以登录 …

语言基础篇1——Python概述,Python是什么?Python能干什么?

概述 简介 Python&#xff0c;计算机高级语言&#xff0c;读作/ˈpaɪθən/&#xff08;英音&#xff09;、/ˈpaɪθɑːn/&#xff08;美音&#xff09;&#xff0c;意为蟒蛇&#xff0c;Python的logo为两条缠绕的蟒蛇 特点 Python以开发效率高而运行效率低著称 应用领域…

【洛谷】P2678 跳石头

原题链接&#xff1a;https://www.luogu.com.cn/problem/P2678 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 二分答案。&#xff08;使用二分需要满足两个条件。一个是有界&#xff0c;一个是单调。 这题的题面&#xff1a;使得选手们在比赛过程中…

2023最新任务悬赏平台源码uniapp+Thinkphp新款悬赏任务地推拉新充场游戏试玩源码众人帮威客兼职任务帮任务发布分销机

新款悬赏任务地推拉新充场游戏试玩源码众人帮威客兼职任务帮任务发布分销机制 后端是&#xff1a;thinkphpFastAdmin 前端是&#xff1a;uniapp 1.优化首页推荐店铺模块如有则会显示此模块没有则隐藏。 2修复首页公告&#xff0c;更改首页公告逻辑。&#xff08;后台添加有公…

【SpringBoot学习笔记02】静态资源

Spring Boot 通过 MVC 的自动配置类 WebMvcAutoConfiguration 为这些 WebJars 前端资源提供了默认映射规则&#xff0c;部分源码如下。 jar包&#xff1a; JAR 文件就是 Java Archive File&#xff0c;顾名思意&#xff0c;它的应用是与 Java 息息相关的&#xff0c;是 Java 的…

msvcp140.dll丢失的解决方法,win10系统dll报错的解决方法

今天&#xff0c;我将为大家分享一个关于msvcp140.dll丢失的解决方法&#xff0c;特别是针对在Windows 10系统上遇到这个问题的朋友们。在开始之前&#xff0c;我想先简要介绍一下msvcp140.dll文件的作用。msvcp140.dll是Microsoft Visual C运行时库的一部分&#xff0c;它包含…

Python功能制作之简单的绘画板

可能需要安装的库 pip install pillow pip install tk制作 我们使用Python的Tkinter库创建的一个简单绘画软件。 首先创建了一个简单的绘画应用&#xff0c;可以选择颜色、切换画笔和橡皮擦模式、清空画布以及绘制自由曲线。 里面的主要结构和功能是&#xff1a; 导入必要的…

WICC 2021 技术分论坛 “开箱即用”语聊房Demo成亮点

7月24日&#xff0c;第三届全球互联网通信云大会(WICC 2021)在北京成功召开&#xff0c;数千开发者共赴通信云技术盛宴。本次会议中&#xff0c;“开发者服务生态”被作为重要议题引起了全产业链的广泛关注。作为大会主办方&#xff0c;全球互联网通信云领导厂商融云不但提出了…

人工智能语聊的相关原理学习(二)

导读 前段时间楼主决定潜心研究google的word2vec中使用到的相关原理&#xff0c;但是在一番学习之后&#xff0c;楼主发现作为一枚小白&#xff0c;如果对自然语言处理的基础原理都不了解的话&#xff0c;实在是很难理解word2vec中的那些算法&#xff0f;公式等等&#xff0c;于…

在元宇宙中搭建语聊房,设计思路和实现方法分享

本文为声网 RTE 开发者社区作者投稿&#xff0c;作者为arige 目标 1. 制定目标 不妨大家想一下这个场景&#xff1a; 你走进一个咖啡厅&#xff0c;看到了一个美女或者帅哥&#xff0c;想要一个微信号&#xff0c;方便后续发展。 那我们要怎么做呢&#xff1f; 走到对方跟…

简单快速搭建,全新语聊方案

导读&#xff1a; 年初的时候因为马斯克的一场直播带货&#xff0c;让 ClubHouse 迅速出圈变成现在炙手可热的社交产品。开个玩笑。现在要是没有用过ClubHouse你都不好意思说自己是互联网行业的。(不过目前中国市场已下架) 是的&#xff0c;这个圈子就是这么的追逐潮流。语音社…

畅所语聊

这是一个实现多人在线聊天的小项目 思想:首先这个项目分为三个模块(1.登录和注册、2.用户发送消息,服务端接收消息,并且放入数据池中、3.将数据转发给每个用户) 1.登录和注册 (1)注册:将自己的所有信息使用tcp来进行发送给服务器,服务器接收到这个信息之后,将用户信…

一对一语聊直播源码视频交友系统,一对一直播即时通讯IM产品。

一对一语聊直播源码视频交友系统&#xff0c;一对一直播即时通讯IM产品。 匹配聊天 开启速度匹配&#xff0c;匹配逻辑异性匹配。原始码&#xff0c;回调&#xff0c;API和SDK等接口调用正常双端经过测试完美正常跑通&#xff01; 纯原生开发 开发语言 后端web&#xff1a;PH…

程序猿七夕礼物-如何30分钟给女友快速搭建专属语聊房

1 语聊房应用场景说明 七夕礼物准备好了吗&#xff1f;程序猿七夕礼物标配&#xff0c;给女友搭建专属语聊房&#xff0c;既浪漫又硬核&#xff01; 语聊房在社交场景中使用比较广泛&#xff0c;社交APP中的语聊房场景的实现&#xff0c;主要由业务系统和移动/Web 客户端组成…

语聊房 SDK,下一代场景化解决方案新范式

【关注 融云全球互联网通信云】近日&#xff0c;融云语聊房 SDK 2.0 实力上线。在 1.0 的实时连麦、百万并发、音频管理等核心功能基础上&#xff0c;2.0 新增跨房间 PK 和语音电台两大场景&#xff0c;及房间浮窗显示、滑动切换房间等九大实用功能。 持续精耕语音社交赛道&a…

从语聊房 SDK 的诞生,看 PaaS 服务的演进过程

【关注 融云全球互联网通信云】展开讨论之前&#xff0c;我们先来看一段 Javascript 伪代码。 // 加⼊聊天室&#xff0c;获取收发消息和信令能⼒ IMClient.shared.join(roomId, (isSuccess, error) > { if(isSuccess) { // 加⼊RTC Room 获取⾳频流和发布⾳频流能⼒ RTCCl…

实时音视频|社交直播语聊商业化解决方案

摘要 在过去几年的直播行业创业风口期中&#xff0c;直播的用户关注度疯狂增长&#xff0c;但用户质量却参差不齐。随着用户新鲜感一过&#xff0c;流失率变得相当严重&#xff0c;各大平台都在竭尽全力防御。然而&#xff0c;留住“凑热闹”的非直播受众用户并不是最关键的问…