十年網(wǎng)站開發(fā)經(jīng)驗 + 多家企業(yè)客戶 + 靠譜的建站團隊
量身定制 + 運營維護+專業(yè)推廣+無憂售后,網(wǎng)站問題一站解決
這篇文章將為大家詳細講解有關(guān)HTML5移動如何實現(xiàn)匯率計算器,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
網(wǎng)站建設(shè)哪家好,找創(chuàng)新互聯(lián)!專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了永濟免費建站歡迎大家使用!
php實現(xiàn)匯率設(shè)置頁面的顯示
100美元
=
人民幣
100日元
=
人民幣
100里爾
=
人民幣
100新加坡元
=
人民幣
100歐元
=
人民幣
100克朗
=
人民幣
100英鎊
=
人民幣
下面給出全部界面的源碼:
index.html
無標題文檔
人民幣
美元
日元
里爾
新加坡元
歐元
克朗
英鎊
100美元
=
人民幣
100日元
=
人民幣
100里爾
=
人民幣
100新加坡元
=
人民幣
100歐元
=
人民幣
100克朗
=
人民幣
100英鎊
=
人民幣
style.css
/* CSS Document */ body{ background-color:#c19e7d; font-family:"黑體"; margin:0px; padding:0px; } /* 1.text-align:center 設(shè)置文本或img標簽等一些內(nèi)聯(lián)對象(或與之類似的元素)的居中。 2.margin:0 auto 設(shè)置塊元素(或與之類似的元素)的居中。 */ .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; } .bg .list .equal{ float:left; width:20px; height:77px; text-align:center; font-size:30px; font-weight:bold; line-height:50px; color:#ffefda; } .bg .list .setRates{ float:left; width:153px; height:77px; text-align:left; padding-top:3px;} .bg .list .setRates input{ float:right; background-color:transparent; width:128px; height:28px; border:2px solid #be9975; background-color:#84613f; border-radius:7px; font-size:28px; color:#ffefda; font-family:Arial, Helvetica, sans-serif; padding-right:6px; text-align:right; } .bg .list .flagRight{ float:left; width:67px; height:77px; text-align:left; padding-left:6px; color:#bea58c; line-height:50px; font-size:22px;} /*setting*/ .setRates .header{ width:464px; height:116px; background:url(../images/setting_title.png) no-repeat; padding-left:16px; } .setRates .header .back{ float:left; width:93px; height:54px; } .setRates .header .back a{ float:left; width:93px; height:54px; } .setRates .header .back a:hover{ float:left; width:93px; height:54px; background:url(../images/setting_back.png) no-repeat; } .f25{ font-size:25px;} .w100{ width:100px;} /*解決 jqmobile切換閃屏*/ .ui-page { backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; }
手機上的運行效果:
關(guān)于“HTML5移動如何實現(xiàn)匯率計算器”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。