HTML5移動(dòng)開(kāi)發(fā)之路（45）——匯率計算器【1】
本文為 兄弟連IT教育 機構官方 HTML5培訓 教程，主要介紹：HTML5移動(dòng)開(kāi)發(fā)之路（45）——匯率計算器【1】
這兩天看了《PhoneGap實(shí)戰》上面有一個(gè)匯率計算器的例子，個(gè)人覺(jué)得比較好，就拿出來(lái)和大家分享一下，在接下來(lái)的幾篇文章中我們來(lái)一起完成這個(gè)PhoneGap + jQuery mobile的小練習。
一、在DrameWeaver中新建站點(diǎn)，如圖：
二、編寫(xiě)匯率計算頁(yè)
!doctype html
html
head
meta charset="utf-8"
title無(wú)標題文檔/title
!--引入相關(guān)樣式框架--
link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css"/
/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 original="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"http://div
/div
div class="list"
div class="currency"美元/div
div class="money strong"input type="number" id="c2" maxlength="12" value="0"http://div
/div
div class="list"
div class="currency"日元/div
div class="money strong"input type="number" id="c3" maxlength="12" value="0"http://div
/div
div class="list"
div class="currency"里爾/div
div class="money strong"input type="number" id="c4" maxlength="12" value="0"http://div
/div
div class="list"
div class="currency"新加坡元/div
div class="money strong"input type="number" id="c5" maxlength="12" value="0"http://div
/div
div class="list"
div class="currency"歐元/div
div class="money strong"input type="number" id="c6" maxlength="12" value="0"http://div
/div
div class="list"
div class="currency"克朗/div
div class="money strong"input type="number" id="c7" maxlength="12" value="0"http://div
/div
div class="list"
div class="currency"英鎊/div
div class="money strong"input type="number" id="c8" maxlength="12" value="0"http://div
/div
/div
/div
div data-role="page" id="setting"
div class="setRates"
/div
/div
/body
/html
這個(gè)界面現在還很不美觀(guān)，我們來(lái)設計一下樣式
引入樣式文件：
link rel="stylesheet" href="css/style.css"/
添加頭部樣式：
/* CSS Document */
body{
background-color:#c19e7d;
font-family:"黑體";
margin:0px;
padding:0px;
1.text-align:center 設置文本或img標簽等一些內聯(lián)對象（或與之類(lèi)似的元素）的居中。
2.margin:0 auto 設置塊元素（或與之類(lèi)似的元素）的居中。
.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;
