小强的HTML5移动开发之路（45）——汇率计算器【1】
这两天看了《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 ...
随机推荐
- 动态链接库DLL的创建生成及调用
一.背景 最近在做CANTOUSB底层驱动的调用,是调用别人已经封装好的库,看不到别人写的源程序.程序中调用的是隐式调用即 x.h+x.lib+x.dll,其中DLL即是动态链接库(Dynamic L ...
- Moodle 中文 API 之 文件管理API
File API 文件管理 文件夹 1. 概述 2. 文件域 2.1 命名文件域 3. 提供文件给用户 4. 从用户那获取文件 5. 样例 5.1 浏览文件 5.2 移动文件 5.3 文件列表 5. ...
- 关于C++中的内存泄露
1.c++内存泄漏的定义: 内存泄漏(memory leak)是指由于疏忽或错误造成了程序未能释放掉不再使用的内存的情况.内存泄漏并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,失 ...
- Python 极简教程（十）集合 set
什么是集合? 集合(set)是一种可变,无序和不重复的序列. 集合是python的序列之一,集合没有列表(list).元组(tuple)和字典(ditc)常见.但是有时候也有奇效. 我们先来看个集合的 ...
- crm2013 查看下拉框的选项
在CRM2011中,我们非常easy查看下拉框的选择.打开页面,按F12.把光标对准目标,就会显示出详细的选项,如图:' watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi ...
- iOS_04_数据类型、常量、变量
一.数据 1.什么是数据 * 生活中时时刻刻都在跟数据打交道,比如体重数据.血压数据.股价数据等.在我们使用计算机的过程中,会接触到各种各样的数据,有文档数据,图片数据,视频数据,还有聊天QQ产生的文 ...
- 关于JS面向对象继承问题
1.原型继承(是JS中很常用的一种继承方式) 子类children想要继承父类father中的所有的属性和方法(私有+公有),只需要让children.prototype=new father;即可. ...
- CentOS 6 通过DVD快速建立本地YUM源
一.将DVD光盘放入RedHat/CentOS6.X服务器/电脑光驱中 二.挂载DVD光驱到/mnt/cdrom # mkdir -p /mnt/cdrom # mount -t iso9660 /d ...
- js用button激活 Alert 元素关闭按钮的交互功能
js用button激活 Alert 元素关闭按钮的交互功能 一.总结 1.点(.)对应class,井号(#)对应id 2.jquery:amaze里面用的jquery,jquery熟悉之后,这些东西 ...
- js循环函数中的匿名函数和闭包问题（匿名函数要用循环中变量的问题）
js循环函数中的匿名函数和闭包问题(匿名函数要用循环中变量的问题) 一.总结 需要好好看下面代码 本质是因为匿名函数用到了循环中的变量,而普通方式访问的话,匿名函数的访问在循环之后,所以得到的i是循环 ...