小强的HTML5移动开发之路（46）——汇率计算器【2】
在上一篇中我们完成了汇率计算页面，下面来完成汇率设置页面的显示。
<div class="setRates">
<div class="header">
<div class="back"><a href="#" data-rel="back" id="backAndSave"><img src="images/tm.gif" width="93" height="54" border="0"></a></div>
</div>
<div class="bg">
<!--列表-->
<div class="list">
<div class="currency w100"><span class="strong">100</span><span class="f25">美元</span></div>
<div class="equal">=</div>
<div class="setRates">
<input type="number" id="r2" maxlength="8" value="1">
</div>
<div class="flagRight">人民币</div>
</div> <div class="list">
<div class="currency"><span class="strong">100</span><span class="f25">日元</span></div>
<div class="equal">=</div>
<div class="setRates">
<input type="number" id="r3" maxlength="8" value="1">
</div>
<div class="flagRight">人民币</div>
</div> <div class="list">
<div class="currency"><span class="strong">100</span><span class="f25">里尔</span></div>
<div class="equal">=</div>
<div class="setRates">
<input type="number" id="r4" maxlength="8" value="1">
</div>
<div class="flagRight">人民币</div>
</div>
<div class="list">
<div class="currency"><span class="strong">100</span><span class="f25">新加坡元</span></div>
<div class="equal">=</div>
<div class="setRates">
<input type="number" id="r5" maxlength="8" value="1">
</div>
<div class="flagRight">人民币</div>
</div>
<div class="list">
<div class="currency"><span class="strong">100</span><span class="f25">欧元</span></div>
<div class="equal">=</div>
<div class="setRates">
<input type="number" id="r6" maxlength="8" value="1">
</div>
<div class="flagRight">人民币</div>
</div>
<div class="list">
<div class="currency"><span class="strong">100</span><span class="f25">克朗</span></div>
<div class="equal">=</div>
<div class="setRates">
<input type="number" id="r7" maxlength="8" value="1">
</div>
<div class="flagRight">人民币</div>
</div>
<div class="list">
<div class="currency"><span class="strong">100</span><span class="f25">英镑</span></div>
<div class="equal">=</div>
<div class="setRates">
<input type="number" id="r8" maxlength="8" value="1">
</div>
<div class="flagRight">人民币</div>
</div>
</div>
<div class="footer"></div>
</div>
下面给出全部界面的源码：
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!--引入相关样式框架-->
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div class="exchangeRates">
<div class="header">
<div class="right"><a href="#setting" data-transition="slide"><img src="images/tm.gif" width="80" height="89" border="0"></a></div>
</div>
<div class="bg">
<!--汇率国家列表-->
<div class="list">
<div class="currency">人民币</div>
<div class="money"><input type="number" id="c1" maxlength="12" value="0"/></div>
</div>
<div class="list">
<div class="currency">美元</div>
<div class="money strong" ><input type="number" id="c2" maxlength="12" value="0"/></div>
</div>
<div class="list">
<div class="currency">日元</div>
<div class="money strong" ><input type="number" id="c3" maxlength="12" value="0"/></div>
</div>
<div class="list">
<div class="currency">里尔</div>
<div class="money strong" ><input type="number" id="c4" maxlength="12" value="0"/></div>
</div>
<div class="list">
<div class="currency">新加坡元</div>
<div class="money strong" ><input type="number" id="c5" maxlength="12" value="0"/></div>
</div>
<div class="list">
<div class="currency">欧元</div>
<div class="money strong" ><input type="number" id="c6" maxlength="12" value="0"/></div>
</div>
<div class="list">
<div class="currency">克朗</div>
<div class="money strong" ><input type="number" id="c7" maxlength="12" value="0"/></div>
</div>
<div class="list">
<div class="currency">英镑</div>
<div class="money strong" ><input type="number" id="c8" maxlength="12" value="0"/></div>
</div>
</div>
<div class="footer"></div>
</div>
</div>
<div data-role="page" id="setting">
<div class="setRates">
<div class="header">
<div class="back"><a href="#" data-rel="back" id="backAndSave"><img src="images/tm.gif" width="93" height="54" border="0"></a></div>
</div>
<div class="bg">
<!--列表-->
<div class="list">
<div class="currency w100"><span class="strong">100</span><span class="f25">美元</span></div>
<div class="equal">=</div>
<div class="setRates">
<input type="number" id="r2" maxlength="8" value="1">
</div>
<div class="flagRight">人民币</div>
</div> <div class="list">
<div class="currency"><span class="strong">100</span><span class="f25">日元</span></div>
<div class="equal">=</div>
<div class="setRates">
<input type="number" id="r3" maxlength="8" value="1">
</div>
<div class="flagRight">人民币</div>
</div> <div class="list">
<div class="currency"><span class="strong">100</span><span class="f25">里尔</span></div>
<div class="equal">=</div>
<div class="setRates">
<input type="number" id="r4" maxlength="8" value="1">
</div>
<div class="flagRight">人民币</div>
</div>
<div class="list">
<div class="currency"><span class="strong">100</span><span class="f25">新加坡元</span></div>
<div class="equal">=</div>
<div class="setRates">
<input type="number" id="r5" maxlength="8" value="1">
</div>
<div class="flagRight">人民币</div>
</div>
<div class="list">
<div class="currency"><span class="strong">100</span><span class="f25">欧元</span></div>
<div class="equal">=</div>
<div class="setRates">
<input type="number" id="r6" maxlength="8" value="1">
</div>
<div class="flagRight">人民币</div>
</div>
<div class="list">
<div class="currency"><span class="strong">100</span><span class="f25">克朗</span></div>
<div class="equal">=</div>
<div class="setRates">
<input type="number" id="r7" maxlength="8" value="1">
</div>
<div class="flagRight">人民币</div>
</div>
<div class="list">
<div class="currency"><span class="strong">100</span><span class="f25">英镑</span></div>
<div class="equal">=</div>
<div class="setRates">
<input type="number" id="r8" maxlength="8" value="1">
</div>
<div class="flagRight">人民币</div>
</div>
</div>
<div class="footer"></div>
</div>
</div>
</body>
</html>
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;
} .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;
}
手机上的运行效果：
小强的HTML5移动开发之路（46）——汇率计算器【2】的更多相关文章
- 小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- 小强的HTML5移动开发之路（12）——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
- 小强的HTML5移动开发之路（3）——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
- 小强的HTML5移动开发之路（1）——HTML介绍
来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...
随机推荐
- 【2017 Multi-University Training Contest - Team 7】Kolakoski
[Link]:http://acm.hdu.edu.cn/contests/contest_showproblem.php?pid=1011&cid=765 [Description] 有一种 ...
- iOS关闭键盘简单实现(objc/swift)
Objective-C 代码实例方式一 [[[UIApplication sharedApplication] keyWindow] endEditing:YES]; 假设一个view上有很多Text ...
- openGLES（三）
着色器语言 着色器语言基于c/c++语言,但是还是有区别的,它不是面向对象 数据类型概述 内建的数据类型:浮点型(float).布尔型(bool).整形(int),矩阵(matrix)以及向量 ...
- 跨域请求发送不了cookie问题： AJAX跨域请求JS配置和服务器端配置
1.ajax是同步方式 $.ajax({ type: "post", url:url, async:false, data:datatosend, dataType:"j ...
- 【Codeforces Round #429 (Div. 1) B】Leha and another game about graph
[链接]点击打开链接 [题意] 给出一个连通图,并给每个点赋一个d值0或1或-1,要求选出一个边的集合,使得所有的点i要么d[i] == -1,要么 dgree[i] % 2 == d[i],dgr ...
- Android Material风格的应用(四)--FloatActionButton
添加 FloatActionButton和SnackBar Android Material风格的应用(一)--AppBar TabLayoutAndroid Material风格的应用(二)--Re ...
- 怎么做好看的html5游戏界面
怎么做好看的html5游戏界面 一.总结 一句话总结:html5应该是完全可以做特别好看的游戏界面的.最下面那个背景图完全是一张图片动的雪和小动物可以是gif,或者是canvas,右边的那各个选择框就 ...
- POJ 3061 Subsequence 二分或者尺取法
http://poj.org/problem?id=3061 题目大意: 给定长度为n的整列整数a[0],a[1],--a[n-1],以及整数S,求出总和不小于S的连续子序列的长度的最小值. 思路: ...
- Loadrunner--运行场景报Socket descriptor not found错误
今天早上在使用LoadRunner时,报了如下的错误,开始并未看错误以为是录制问题引起,就重新录制了一遍,简单施压看看错误是否还有,结果错误仍然有,如下所示: Error: Socket descri ...
- springboot集成shiro 实现权限控制（转）
shiro apache shiro 是一个轻量级的身份验证与授权框架,与spring security 相比较,简单易用,灵活性高,springboot本身是提供了对security的支持,毕竟是自 ...