Rumah >hujung hadapan web >Tutorial H5 >小强的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> <p data-role="page" id="index"> <p class="exchangeRates"> <p class="header"> <p class="right"> <p class="right"> <a href="#setting" data-transition="slide"><img src="images/tm.gif" width="80" height="89" border="0"></a> </p> </p> </p> <p class="bg"> <p class="list"> <p class="currency">人民币</p> <p class="money"><input type="number" id="c1" maxlength="12" value="0"/></p> </p> <p class="list"> <p class="currency">美元</p> <p class="money strong"><input type="number" id="c2" maxlength="12" value="0"/></p> </p> <p class="list"> <p class="currency">日元</p> <p class="money strong"><input type="number" id="c3" maxlength="12" value="0"/></p> </p> <p class="list"> <p class="currency">里尔</p> <p class="money strong"><input type="number" id="c4" maxlength="12" value="0"/></p> </p> <p class="list"> <p class="currency">新加坡元</p> <p class="money strong"><input type="number" id="c5" maxlength="12" value="0"/></p> </p> <p class="list"> <p class="currency">欧元</p> <p class="money strong"><input type="number" id="c6" maxlength="12" value="0"/></p> </p> <p class="list"> <p class="currency">克朗</p> <p class="money strong"><input type="number" id="c7" maxlength="12" value="0"/></p> </p> <p class="list"> <p class="currency">英镑</p> <p class="money strong"><input type="number" id="c8" maxlength="12" value="0"/></p> </p> </p> </p> <p data-role="page" id="setting"> <p class="setRates"> </p> </p> </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; }
以上就是小强的HTML5移动开发之路(45)——汇率计算器【1】的内容,更多相关内容请关注PHP中文网(www.php.cn)!