小强的HTML5移动开发之路(45)——汇率计算器【1】
阅读原文时间:2022年05月14日阅读:1

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

一、在DrameWeaver中新建站点,如图:

二、编写汇率计算页





无标题文档








人民币



美元



日元



里尔



新加坡元



欧元



克朗



英镑






    </div>  
</div>  


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

引入样式文件:

添加头部样式:

/* 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

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