Chinaunix首页 | 论坛 | 博客

15859020900的ChinaUnix博客

首页　| 　博文目录　| 　关于我

15859020900

  • 博客访问： 77037
  • 博文数量： 59
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 600
  • 用 户 组： 普通用户
  • 注册时间： 2016-08-22 10:54
文章分类

全部博文（59）

文章存档

2016年（59）

我的朋友
最近访客
推荐博文
HTML5移动开发之路（45）——汇率计算器【1】

分类： HTML5

2016-11-15 14:06:18

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（45）——汇率计算器【1】

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

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

二、编写汇率计算页

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. >  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>无标题文档title>  
  6.   
  7. <link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css"/>  
  8. <script src="js/jquery.js">script>  
  9. <script src="js/jquery.mobile-1.0.1.min.js">script>  
  10. head>  
  11. <body>  
  12.     <div data-role="page" id="index">  
  13.         <div class="exchangeRates">  
  14.         <div class="header">  
  15.             <div class="right">  
  16.                 <div class="right">  
  17.                     <a href="#setting" data-transition="slide"><img src="images/tm.gif" width="80" height="89" border="0">a>  
  18.                 div>  
  19.             div>  
  20.         div>  
  21.         <div class="bg">  
  22.             <div class="list">  
  23.                 <div class="currency">人民币div>  
  24.                 <div class="money"><input type="number" id="c1" maxlength="12" value="0"/>div>  
  25.             div>  
  26.             <div class="list">  
  27.                 <div class="currency">美元div>  
  28.                 <div class="money strong"><input type="number" id="c2" maxlength="12" value="0"/>div>  
  29.             div>  
  30.             <div class="list">  
  31.                 <div class="currency">日元div>  
  32.                 <div class="money strong"><input type="number" id="c3" maxlength="12" value="0"/>div>  
  33.             div>  
  34.             <div class="list">  
  35.                 <div class="currency">里尔div>  
  36.                 <div class="money strong"><input type="number" id="c4" maxlength="12" value="0"/>div>  
  37.             div>  
  38.             <div class="list">  
  39.                 <div class="currency">新加坡元div>  
  40.                 <div class="money strong"><input type="number" id="c5" maxlength="12" value="0"/>div>  
  41.             div>  
  42.             <div class="list">  
  43.                 <div class="currency">欧元div>  
  44.                 <div class="money strong"><input type="number" id="c6" maxlength="12" value="0"/>div>  
  45.             div>  
  46.             <div class="list">  
  47.                 <div class="currency">克朗div>  
  48.                 <div class="money strong"><input type="number" id="c7" maxlength="12" value="0"/>div>  
  49.             div>  
  50.             <div class="list">  
  51.                 <div class="currency">英镑div>  
  52.                 <div class="money strong"><input type="number" id="c8" maxlength="12" value="0"/>div>  
  53.             div>            
  54.         div>  
  55.     div>  
  56.     <div data-role="page" id="setting">  
  57.         <div class="setRates">  
  58.           
  59.         div>  
  60.     div>  
  61. body>  
  62. html>  

 

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

引入样式文件：

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <link rel="stylesheet" href="css/style.css"/>  

添加头部样式：

 

 

[css] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. /* CSS Document */  
  2. body{  
  3.     background-color:#c19e7d;  
  4.     font-family:"黑体";  
  5.     margin:0px;  
  6.     padding:0px;  
  7. }  
  8.   
  9. /* 
  10. 1.text-align:center 设置文本或img标签等一些内联对象（或与之类似的元素）的居中。 
  11. 2.margin:0 auto 设置块元素（或与之类似的元素）的居中。 
  12. */  
  13.   
  14. .exchangeRates,.setRates{  
  15.     width:480px;   
  16.     height:100%;  
  17.     margin:0 auto;  
  18.     font-family:"黑体";     
  19. }  
  20.   
  21. .header{  
  22.     width:480px;      
  23.     height:116px;  
  24.     background:url(../images/title.png) no-repeat;  
  25. }  
  26.   
  27. .header .right{   
  28.     float:right;  
  29.     width:80px;  
  30.     height:54px;  
  31. }  
  32. .header .right a{  
  33.     float:right;  
  34.     width:80px;  
  35.     height:54px;      
  36. }  
  37. .header .right a:hover{  
  38.     float:left;  
  39.     width:80px;  
  40.     height:54px;      
  41.     background:url(../images/setting.png) no-repeat;  
  42. }  

 

添加列表样式：

 

[css] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. .bg{  
  2.     width:480px;  
  3.     height:598px;  
  4.     background:url(../images/bg.png) no-repeat;  
  5.     background-color:#999933;  
  6.     overflow:hidden;  
  7. }  
  8.   
  9. .bg .list{  
  10.     float:left;  
  11.     width:480px;  
  12.     height:77px;  
  13.     background:url(../images/line.png) 0px 64px no-repeat;    
  14. }  
  15.   
  16. .bg .list .currency{  
  17.     float:left;  
  18.     width:150px;  
  19.     height:77px;  
  20.     text-align:left;  
  21.     font-size:28px;  
  22.     line-height:50px;  
  23.     color:#bea58c;  
  24.     padding-left:30px;  
  25. }  
  26.   
  27. .bg .list .money{   
  28.     float:left;   
  29.     width:240px;  
  30.     height:77px;   
  31.     text-align:right;   
  32.     font-weight:bold;   
  33.     line-height:50px;   
  34.     color:#ffefda;  
  35.     padding-top:3px;  
  36. }  
  37. .bg .list .money input{  
  38.     float:right;   
  39.     background-color:transparent;   
  40.     width:210px;   
  41.     height:25px;  
  42.     border:0px;   
  43.     font-size:30px;   
  44.     color:#ffefda;   
  45.     font-family:Arial, Helvetica, sans-serif;  
  46.     padding-left:6px;   
  47.     padding-right:6px;   
  48.     text-align:right;  
  49. }  
  50.   
  51. .strong{ font-weight:bold}  
  52.   
  53. .footer{  
  54.     width:480px;   
  55.     height:49px;   
  56.     background:url(../images/bottom.png) no-repeat;  
  57. }  

阅读(1275) | 评论(0) | 转发(0) |
0

上一篇：HTML5移动开发之路（44）——JqueryMobile中的按钮

下一篇：HTML5移动开发之路（46）——汇率计算器【2】

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6