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

这两天看了《phonegap实战》上面有一个汇率计算器的例子，个人觉得比较好，就拿出来和大家分享一下，在接下来的几篇文章中我们来一起完成这个phonegap + jquery mobile的小练习。

一、在DrameWeaver中新建站点，如图：

二、编写汇率计算页

	

    	

        

        	

            	

                	@@##@@
                
            

        

        

        	

            	
人民币
                

            

        	

            	
美元
                

            

        	

            	
日元
                

            

        	

            	
里尔
                

            

        	

            	
新加坡元
                

            

            

            	
欧元
                

            

            

            	
克朗
                

            

            

            	
英镑
                

            
          
        

    

    

    	

        
        
    

立即学习“前端免费学习笔记（深入）”；

这个界面现在还很不美观，我们来设计一下样式

引入样式文件：

AI Room Planner

AI 室内设计工具，免费为您的房间提供上百种设计方案

下载

添加头部样式：

/* 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;
}

以上就是小强的HTML5移动开发之路（45）——汇率计算器【1】的内容，更多相关内容请关注PHP中文网（www.php.cn）！