小强的HTML5移动开发之路（45）—

这两天看了《PhoneGap实战》上面有一个汇率计算器的例子，个人觉得比较好，就拿出来和大家分享一下，在接下来的几篇文章中我们来一起完成这个PhoneGap + Jquery mobile的小练习。

一、在DrameWeaver中新建站点，如图：

二、编写汇率计算页

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<!--引入相关样式框架-->

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css"/>

<script src="js/jquery.js"></script>

<script src="js/jquery.mobile-1.0.1.min.js"></script>

</head>

<body>

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

    	<div class="exchangeRates">

        <div class="header">

        	<div class="right">

            	<div class="right">

                	<a href="#setting" data-transition="slide"><img src="images/tm.gif" width="80" height="89" border="0"></a>

                </div>

            </div>

        </div>

        <div class="bg">

        	<div class="list">

            	<div class="currency">人民币</div>

                <div class="money"><input type="number" id="c1" maxlength="12" value="0"/></div>

            </div>

        	<div class="list">

            	<div class="currency">美元</div>

                <div class="money strong"><input type="number" id="c2" maxlength="12" value="0"/></div>

            </div>

        	<div class="list">

            	<div class="currency">日元</div>

                <div class="money strong"><input type="number" id="c3" maxlength="12" value="0"/></div>

            </div>

        	<div class="list">

            	<div class="currency">里尔</div>

                <div class="money strong"><input type="number" id="c4" maxlength="12" value="0"/></div>

            </div>

        	<div class="list">

            	<div class="currency">新加坡元</div>

                <div class="money strong"><input type="number" id="c5" maxlength="12" value="0"/></div>

            </div>

            <div class="list">

            	<div class="currency">欧元</div>

                <div class="money strong"><input type="number" id="c6" maxlength="12" value="0"/></div>

            </div>

            <div class="list">

            	<div class="currency">克朗</div>

                <div class="money strong"><input type="number" id="c7" maxlength="12" value="0"/></div>

            </div>

            <div class="list">

            	<div class="currency">英镑</div>

                <div class="money strong"><input type="number" id="c8" maxlength="12" value="0"/></div>

            </div>

        </div>

    </div>

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

    	<div class="setRates">

        </div>

    </div>

</body>

</html>

这个界面现在还很不美观，我们来设计一下样式

引入样式文件：

<link rel="stylesheet" href="css/style.css"/>

添加头部样式：

/* CSS Document */

body{

	background-color:#c19e7d;

	font-family:"黑体";

	margin:0px;

	padding:0px;

}

/*

1.text-align:center 设置文本或img标签等一些内联对象（或与之类似的元素）的居中。

2.margin:0 auto 设置块元素（或与之类似的元素）的居中。

*/

.exchangeRates,.setRates{

	width:480px;

	height:100%;

	margin:0 auto;

	font-family:"黑体";

}

.header{

	width:480px;

	height:116px;

	background:url(../images/title.png) no-repeat;

}

.header .right{

	float:right;

	width:80px;

	height:54px;

}

.header .right a{

	float:right;

	width:80px;

	height:54px;

}

.header .right a:hover{

	float:left;

	width:80px;

	height:54px;

	background:url(../images/setting.png) no-repeat;

}

添加列表样式：

.bg{

	width:480px;

	height:598px;

	background:url(../images/bg.png) no-repeat;

	background-color:#999933;

	overflow:hidden;

}

.bg .list{

	float:left;

	width:480px;

	height:77px;

	background:url(../images/line.png) 0px 64px no-repeat;

}

.bg .list .currency{

	float:left;

	width:150px;

	height:77px;

	text-align:left;

	font-size:28px;

	line-height:50px;

	color:#bea58c;

	padding-left:30px;

}

.bg .list .money{

	float:left;

	width:240px;

	height:77px;

	text-align:right;

	font-weight:bold;

	line-height:50px;

	color:#ffefda;

	padding-top:3px;

}

.bg .list .money input{

	float:right;

	background-color:transparent;

	width:210px;

	height:25px;

	border:0px;

	font-size:30px;

	color:#ffefda;

	font-family:Arial, Helvetica, sans-serif;

	padding-left:6px;

	padding-right:6px;

	text-align:right;

}

.strong{ font-weight:bold}

.footer{

	width:480px;

	height:49px;

	background:url(../images/bottom.png) no-repeat;

}

源代码下载：http://download.csdn.net/detail/lxq_xsyu/7189855

说明：有关框架和图片资源请在源代码中获取。

小强的HTML5移动开发之路（45）——汇率计算器【1】的更多相关文章

小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
小强的HTML5移动开发之路（12）——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器
来自:http://blog.csdn.net/dawanganban/article/details/17679069 在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识,下面我们开始真正的 ...
小强的HTML5移动开发之路（3）——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

随机推荐

BZOJ2555: SubString（后缀自动机，LCT维护Parent树）
Description 懒得写背景了,给你一个字符串init,要求你支持两个操作 (1):在当前字符串的后面插入一个字符串 (2):询问字符串s在当前字符串中出现了几次?(作为连续子串) 你必须在线支 ...
Mysql 简介二
Mysql 数据库引擎: 数据库引擎是用于存储.处理和保护数据的核心服务 Mysql支持的引擎一般有这几种: MyISAM Mysql 5.1版本之前默认的存储引擎,仅仅支持表锁,但查询速度较Inno ...
03002_MySQL数据库的安装和配置
1.MySQL的安装 (1)下载mysql-5.5.49-win32.msi, 链接:MySQL安装包下载密码:geqh : (2)打开下载的MySQL安装文件mysql-5.5.27-win32. ...
PHP用socket连接SMTP服务器发送邮件
PHP用socket连接SMTP服务器发送邮件 PHP用socket连接SMTP服务器发送邮件学习实验记录: 分析与SMTP会话的一般流程 1. HELO XXX \r\n //XXX就是自己起个名字 ...
install-软件安装跟push的区别
今天在做项目的时候,需要往一个user版本的手机中安装一个应用,就在网上查了相应的方法,可以使用如下命令 adb install -r out/target/product/vanzo6752_lwt ...
【AtCoder Regular Contest 082】Derangement
[链接]点击打开链接 [题意] 在这里写题意 [题解] 贪心. 连续一块的p[i]==i的话,对答案的贡献就应该为(这个连续块的长度+1)/2; 长度为1的也正确. (也即两两相邻的互换位置.) [错 ...
高可用架构篇--MyCat在MySQL主从复制基础上实现读写分离
实战操作可参考:http://www.roncoo.com/course/view/3117ffd4c74b4a51a998f9276740dcfb 一.环境操作系统:CentOS-6.6-x86_ ...
COGS——C 14. [网络流24题] 搭配飞行员
http://cogs.pro/cogs/problem/problem.php?pid=14 ★★☆ 输入文件:flyer.in 输出文件:flyer.out 简单对比时间限制:1 s ...
使用Tomcat发布war包
第一步:下载tomacat 1.下载地址:http://tomcat.apache.org 2.解压后目录如下 3.双击bin文件夹下startup.bat 即可启动tomcat, 计算机会弹出控制台 ...
管理aix的密码策略
aix 中 /etc/security/user 存放用户的概要常用参数参数如下 1.account_locked defines whether the account is locke ...

小强的HTML5移动开发之路（45）——汇率计算器【1】

小强的HTML5移动开发之路（45）——汇率计算器【1】的更多相关文章

随机推荐

热门专题