小强的HTML5移动开发之路（46）——汇率计算器【2】-云资源网

在上一篇中我们完成了汇率计算页面，下面来完成汇率设置页面的显示。

	<p class=setRates>
		<p class=header>
			<p class=back><a href=# data-rel=back id=backAndSave><img src=images/tm.gif width=93 height=54 border=0></a></p>
		</p>
		<p class=bg>
			<!--列表-->
			<p class=list>
			  <p class=currency w100><span class=strong>100</span><span class=f25>美元</span></p>
			  <p class=equal>=</p>
			  <p class=setRates>
				<input type=number id=r2 maxlength=8 value=1>
			  </p>
			  <p class=flagRight>人民币</p>
			</p>
			
			<p class=list>
			  <p class=currency><span class=strong>100</span><span class=f25>日元</span></p>
			  <p class=equal>=</p>
			  <p class=setRates>
				<input type=number id=r3 maxlength=8 value=1>
			  </p>
			  <p class=flagRight>人民币</p>
			</p>
			
			<p class=list>
			  <p class=currency><span class=strong>100</span><span class=f25>里尔</span></p>
			  <p class=equal>=</p>
			  <p class=setRates>
				<input type=number id=r4 maxlength=8 value=1>
			  </p>
			  <p class=flagRight>人民币</p>
			</p>
			<p class=list>
			  <p class=currency><span class=strong>100</span><span class=f25>新加坡元</span></p>
			  <p class=equal>=</p>
			  <p class=setRates>
				<input type=number id=r5 maxlength=8 value=1>
			  </p>
			  <p class=flagRight>人民币</p>
			</p>
			<p class=list>
			  <p class=currency><span class=strong>100</span><span class=f25>欧元</span></p>
			  <p class=equal>=</p>
			  <p class=setRates>
				<input type=number id=r6 maxlength=8 value=1>
			  </p>
			  <p class=flagRight>人民币</p>
			</p>
			<p class=list>
			  <p class=currency><span class=strong>100</span><span class=f25>克朗</span></p>
			  <p class=equal>=</p>
			  <p class=setRates>
				<input type=number id=r7 maxlength=8 value=1>
			  </p>
			  <p class=flagRight>人民币</p>
			</p>
			<p class=list>
			  <p class=currency><span class=strong>100</span><span class=f25>英镑</span></p>
			  <p class=equal>=</p>
			  <p class=setRates>
				<input type=number id=r8 maxlength=8 value=1>
			  </p>
			  <p class=flagRight>人民币</p>
			</p>
		</p>
		<p class=footer></p>
	</p>

下面给出全部界面的源码：

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>
<p data-role=page id=index>
	<p class=exchangeRates>
		<p class=header>
			<p class=right><a href=#setting data-transition=slide><img src=images/tm.gif width=80 height=89 border=0></a></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 class=footer></p>
	</p>
</p>
<p data-role=page id=setting>
	<p class=setRates>
		<p class=header>
			<p class=back><a href=# data-rel=back id=backAndSave><img src=images/tm.gif width=93 height=54 border=0></a></p>
		</p>
		<p class=bg>
			<!--列表-->
			<p class=list>
			  <p class=currency w100><span class=strong>100</span><span class=f25>美元</span></p>
			  <p class=equal>=</p>
			  <p class=setRates>
				<input type=number id=r2 maxlength=8 value=1>
			  </p>
			  <p class=flagRight>人民币</p>
			</p>
			
			<p class=list>
			  <p class=currency><span class=strong>100</span><span class=f25>日元</span></p>
			  <p class=equal>=</p>
			  <p class=setRates>
				<input type=number id=r3 maxlength=8 value=1>
			  </p>
			  <p class=flagRight>人民币</p>
			</p>
			
			<p class=list>
			  <p class=currency><span class=strong>100</span><span class=f25>里尔</span></p>
			  <p class=equal>=</p>
			  <p class=setRates>
				<input type=number id=r4 maxlength=8 value=1>
			  </p>
			  <p class=flagRight>人民币</p>
			</p>
			<p class=list>
			  <p class=currency><span class=strong>100</span><span class=f25>新加坡元</span></p>
			  <p class=equal>=</p>
			  <p class=setRates>
				<input type=number id=r5 maxlength=8 value=1>
			  </p>
			  <p class=flagRight>人民币</p>
			</p>
			<p class=list>
			  <p class=currency><span class=strong>100</span><span class=f25>欧元</span></p>
			  <p class=equal>=</p>
			  <p class=setRates>
				<input type=number id=r6 maxlength=8 value=1>
			  </p>
			  <p class=flagRight>人民币</p>
			</p>
			<p class=list>
			  <p class=currency><span class=strong>100</span><span class=f25>克朗</span></p>
			  <p class=equal>=</p>
			  <p class=setRates>
				<input type=number id=r7 maxlength=8 value=1>
			  </p>
			  <p class=flagRight>人民币</p>
			</p>
			<p class=list>
			  <p class=currency><span class=strong>100</span><span class=f25>英镑</span></p>
			  <p class=equal>=</p>
			  <p class=setRates>
				<input type=number id=r8 maxlength=8 value=1>
			  </p>
			  <p class=flagRight>人民币</p>
			</p>
		</p>
		<p class=footer></p>
	</p>
</p>
</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】的内容，更多相关内容请关注PHP中文网（www.gree020.cn）！

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！

云资源网 » 小强的HTML5移动开发之路（46）——汇率计算器【2】

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

你们有qq群吗怎么加入？: 当然有的，如果你是帝国cms、易优cms、和pbootcms系统的爱好者你可以加入我们的QQ千人交流群https://www.sudo1.com/page-qun.html。

云资源网钻石

喜欢 0

分享到：

小强的HTML5移动开发之路（46）——汇率计算器【2】

常见问题FAQ

云资源网钻石

升级SVIP会员

工作时间

常见问题FAQ

云资源网 钻石

相关推荐

提供最优质的资源集合

升级SVIP会员

工作时间

云资源网钻石