Xiaoqiang の HTML5 モバイル開発ロード (45) - 為替レート計算ツール [1]
Feb 15, 2017 pm 01:25 PMここ 2 日間で「PhoneGap in Action」を読みましたが、個人的にはこちらの方が優れていると思う為替レート計算ツールの例がありましたので、次の数記事で完成させたいと思います。この PhoneGap + Jquery モバイルを一緒に少し練習します。
1. 図に示すように、DrameWeaver で新しいサイトを作成します:
2. 為替レート計算ページを作成します
<!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>
ログイン後にコピー
このインターフェースは今のところ美しくありません。 style
はじめに スタイルファイル:
<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; }
ログイン後にコピー
上記はXiaoqですiang の HTML5 モバイル開発パス (45) —— 為替レート計算ツール [1] の内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

人気の記事
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌

人気の記事
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック
Gmailメールのログイン入り口はどこですか?
7285
9


Java チュートリアル
1622
14


CakePHP チュートリアル
1342
46


Laravel チュートリアル
1259
25


PHP チュートリアル
1206
29

