ホームページ > 記事 > ウェブフロントエンド > Xiaoqiang の HTML5 モバイル開発ロード (45) - 為替レート計算ツール [1]
Xiaoqiang の HTML5 モバイル開発ロード (45) - 為替レート計算ツール [1]
- 黄舟オリジナル
- 2017-02-15 13:25:401639ブラウズ
ここ 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 までご連絡ください。