Chinaunix首页 | 论坛 | 博客

15859020900的ChinaUnix博客

首页　| 　博文目录　| 　关于我

15859020900

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

全部博文（59）

文章存档

2016年（59）

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

分类： HTML5

2016-11-17 14:34:32

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

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

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <div class="setRates">  
  2.     <div class="header">  
  3.         <div class="back"><a href="#" data-rel="back" id="backAndSave"><img src="images/tm.gif" width="93" height="54" border="0">a>div>  
  4.     div>  
  5.     <div class="bg">  
  6.           
  7.         <div class="list">  
  8.           <div class="currency w100"><span class="strong">100span><span class="f25">美元span>div>  
  9.           <div class="equal">=div>  
  10.           <div class="setRates">  
  11.             <input type="number" id="r2" maxlength="8" value="1">  
  12.           div>  
  13.           <div class="flagRight">人民币div>  
  14.         div>  
  15.           
  16.         <div class="list">  
  17.           <div class="currency"><span class="strong">100span><span class="f25">日元span>div>  
  18.           <div class="equal">=div>  
  19.           <div class="setRates">  
  20.             <input type="number" id="r3" maxlength="8" value="1">  
  21.           div>  
  22.           <div class="flagRight">人民币div>  
  23.         div>  
  24.           
  25.         <div class="list">  
  26.           <div class="currency"><span class="strong">100span><span class="f25">里尔span>div>  
  27.           <div class="equal">=div>  
  28.           <div class="setRates">  
  29.             <input type="number" id="r4" maxlength="8" value="1">  
  30.           div>  
  31.           <div class="flagRight">人民币div>  
  32.         div>  
  33.         <div class="list">  
  34.           <div class="currency"><span class="strong">100span><span class="f25">新加坡元span>div>  
  35.           <div class="equal">=div>  
  36.           <div class="setRates">  
  37.             <input type="number" id="r5" maxlength="8" value="1">  
  38.           div>  
  39.           <div class="flagRight">人民币div>  
  40.         div>  
  41.         <div class="list">  
  42.           <div class="currency"><span class="strong">100span><span class="f25">欧元span>div>  
  43.           <div class="equal">=div>  
  44.           <div class="setRates">  
  45.             <input type="number" id="r6" maxlength="8" value="1">  
  46.           div>  
  47.           <div class="flagRight">人民币div>  
  48.         div>  
  49.         <div class="list">  
  50.           <div class="currency"><span class="strong">100span><span class="f25">克朗span>div>  
  51.           <div class="equal">=div>  
  52.           <div class="setRates">  
  53.             <input type="number" id="r7" maxlength="8" value="1">  
  54.           div>  
  55.           <div class="flagRight">人民币div>  
  56.         div>  
  57.         <div class="list">  
  58.           <div class="currency"><span class="strong">100span><span class="f25">英镑span>div>  
  59.           <div class="equal">=div>  
  60.           <div class="setRates">  
  61.             <input type="number" id="r8" maxlength="8" value="1">  
  62.           div>  
  63.           <div class="flagRight">人民币div>  
  64.         div>  
  65.     div>  
  66.     <div class="footer">div>  
  67. div>  

 

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

index.html

 

[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. <link rel="stylesheet" href="css/style.css"/>  
  9. <script src="js/jquery.js">script>  
  10. <script src="js/jquery.mobile-1.0.1.min.js">script>  
  11. head>  
  12. <body>  
  13. <div data-role="page" id="index">  
  14.     <div class="exchangeRates">  
  15.         <div class="header">  
  16.             <div class="right"><a href="#setting" data-transition="slide"><img src="images/tm.gif" width="80" height="89" border="0">a>div>  
  17.         div>  
  18.         <div class="bg">  
  19.               
  20.             <div class="list">  
  21.                 <div class="currency">人民币div>  
  22.                 <div class="money"><input type="number" id="c1" maxlength="12" value="0"/>div>  
  23.             div>  
  24.             <div class="list">  
  25.                 <div class="currency">美元div>  
  26.                 <div class="money strong" ><input type="number" id="c2" maxlength="12" value="0"/>div>  
  27.             div>  
  28.             <div class="list">  
  29.                 <div class="currency">日元div>  
  30.                 <div class="money strong" ><input type="number" id="c3" maxlength="12" value="0"/>div>  
  31.             div>  
  32.             <div class="list">  
  33.                 <div class="currency">里尔div>  
  34.                 <div class="money strong" ><input type="number" id="c4" maxlength="12" value="0"/>div>  
  35.             div>  
  36.             <div class="list">  
  37.                 <div class="currency">新加坡元div>  
  38.                 <div class="money strong" ><input type="number" id="c5" maxlength="12" value="0"/>div>  
  39.             div>  
  40.             <div class="list">  
  41.                 <div class="currency">欧元div>  
  42.                 <div class="money strong" ><input type="number" id="c6" maxlength="12" value="0"/>div>  
  43.             div>  
  44.             <div class="list">  
  45.                 <div class="currency">克朗div>  
  46.                 <div class="money strong" ><input type="number" id="c7" maxlength="12" value="0"/>div>  
  47.             div>  
  48.             <div class="list">  
  49.                 <div class="currency">英镑div>  
  50.                 <div class="money strong" ><input type="number" id="c8" maxlength="12" value="0"/>div>  
  51.             div>  
  52.         div>  
  53.         <div class="footer">div>  
  54.     div>  
  55. div>  
  56. <div data-role="page" id="setting">  
  57.     <div class="setRates">  
  58.         <div class="header">  
  59.             <div class="back"><a href="#" data-rel="back" id="backAndSave"><img src="images/tm.gif" width="93" height="54" border="0">a>div>  
  60.         div>  
  61.         <div class="bg">  
  62.               
  63.             <div class="list">  
  64.               <div class="currency w100"><span class="strong">100span><span class="f25">美元span>div>  
  65.               <div class="equal">=div>  
  66.               <div class="setRates">  
  67.                 <input type="number" id="r2" maxlength="8" value="1">  
  68.               div>  
  69.               <div class="flagRight">人民币div>  
  70.             div>  
  71.               
  72.             <div class="list">  
  73.               <div class="currency"><span class="strong">100span><span class="f25">日元span>div>  
  74.               <div class="equal">=div>  
  75.               <div class="setRates">  
  76.                 <input type="number" id="r3" maxlength="8" value="1">  
  77.               div>  
  78.               <div class="flagRight">人民币div>  
  79.             div>  
  80.               
  81.             <div class="list">  
  82.               <div class="currency"><span class="strong">100span><span class="f25">里尔span>div>  
  83.               <div class="equal">=div>  
  84.               <div class="setRates">  
  85.                 <input type="number" id="r4" maxlength="8" value="1">  
  86.               div>  
  87.               <div class="flagRight">人民币div>  
  88.             div>  
  89.             <div class="list">  
  90.               <div class="currency"><span class="strong">100span><span class="f25">新加坡元span>div>  
  91.               <div class="equal">=div>  
  92.               <div class="setRates">  
  93.                 <input type="number" id="r5" maxlength="8" value="1">  
  94.               div>  
  95.               <div class="flagRight">人民币div>  
  96.             div>  
  97.             <div class="list">  
  98.               <div class="currency"><span class="strong">100span><span class="f25">欧元span>div>  
  99.               <div class="equal">=div>  
  100.               <div class="setRates">  
  101.                 <input type="number" id="r6" maxlength="8" value="1">  
  102.               div>  
  103.               <div class="flagRight">人民币div>  
  104.             div>  
  105.             <div class="list">  
  106.               <div class="currency"><span class="strong">100span><span class="f25">克朗span>div>  
  107.               <div class="equal">=div>  
  108.               <div class="setRates">  
  109.                 <input type="number" id="r7" maxlength="8" value="1">  
  110.               div>  
  111.               <div class="flagRight">人民币div>  
  112.             div>  
  113.             <div class="list">  
  114.               <div class="currency"><span class="strong">100span><span class="f25">英镑span>div>  
  115.               <div class="equal">=div>  
  116.               <div class="setRates">  
  117.                 <input type="number" id="r8" maxlength="8" value="1">  
  118.               div>  
  119.               <div class="flagRight">人民币div>  
  120.             div>  
  121.         div>  
  122.         <div class="footer">div>  
  123.     div>  
  124. div>  
  125. body>  
  126. html>  

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. }  
  43.   
  44. .bg{  
  45.     width:480px;  
  46.     height:598px;  
  47.     background:url(../images/bg.png) no-repeat;  
  48.     background-color:#999933;  
  49.     overflow:hidden;  
  50. }  
  51.   
  52. .bg .list{  
  53.     float:left;  
  54.     width:480px;  
  55.     height:77px;  
  56.     background:url(../images/line.png) 0px 64px no-repeat;    
  57. }  
  58.   
  59. .bg .list .currency{  
  60.     float:left;  
  61.     width:150px;  
  62.     height:77px;  
  63.     text-align:left;  
  64.     font-size:28px;  
  65.     line-height:50px;  
  66.     color:#bea58c;  
  67.     padding-left:30px;  
  68. }  
  69.   
  70. .bg .list .money{   
  71.     float:left;   
  72.     width:240px;  
  73.     height:77px;   
  74.     text-align:right;   
  75.     font-weight:bold;   
  76.     line-height:50px;   
  77.     color:#ffefda;  
  78.     padding-top:3px;  
  79. }  
  80. .bg .list .money input{  
  81.     float:right;   
  82.     background-color:transparent;   
  83.     width:210px;   
  84.     height:25px;  
  85.     border:0px;   
  86.     font-size:30px;   
  87.     color:#ffefda;   
  88.     font-family:Arial, Helvetica, sans-serif;  
  89.     padding-left:6px;   
  90.     padding-right:6px;   
  91.     text-align:right;  
  92. }  
  93.   
  94. .strong{ font-weight:bold}  
  95.   
  96. .footer{  
  97.     width:480px;   
  98.     height:49px;   
  99.     background:url(../images/bottom.png) no-repeat;  
  100. }  
  101.   
  102.   
  103. .bg .list .equal{  
  104.     float:left;   
  105.     width:20px;   
  106.     height:77px;   
  107.     text-align:center;   
  108.     font-size:30px;   
  109.     font-weight:bold;   
  110.     line-height:50px;   
  111.     color:#ffefda;   
  112. }  
  113. .bg .list .setRates{   
  114.     float:left;   
  115.     width:153px;   
  116.     height:77px;   
  117.     text-align:left;   
  118.     padding-top:3px;}  
  119. .bg .list .setRates input{  
  120.     float:right;   
  121.     background-color:transparent;   
  122.     width:128px;   
  123.     height:28px;   
  124.     border:2px solid #be9975;   
  125.     background-color:#84613f;   
  126.     border-radius:7px;   
  127.     font-size:28px;   
  128.     color:#ffefda;   
  129.     font-family:Arial, Helvetica, sans-serif;   
  130.     padding-right:6px;   
  131.     text-align:right;  
  132. }  
  133. .bg .list .flagRight{  
  134.     float:left; width:67px;  
  135.      height:77px;   
  136.      text-align:left;   
  137.      padding-left:6px;   
  138.      color:#bea58c;   
  139.      line-height:50px;  
  140.      font-size:22px;}  
  141. /*setting*/  
  142. .setRates .header{  
  143.     width:464px;   
  144.     height:116px;   
  145.     background:url(../images/setting_title.png) no-repeat;   
  146.     padding-left:16px;   
  147. }  
  148. .setRates .header .back{   
  149.     float:left;   
  150.     width:93px;   
  151.     height:54px;   
  152. }   
  153. .setRates .header .back a{   
  154.     float:left;   
  155.     width:93px;   
  156.     height:54px;   
  157. }   
  158. .setRates .header .back a:hover{   
  159.     float:left;   
  160.     width:93px;   
  161.     height:54px;   
  162.     background:url(../images/setting_back.png) no-repeat;   
  163. }   
  164.   
  165. .f25{ font-size:25px;}  
  166. .w100{ width:100px;}  
  167.   
  168. /*解决 jqmobile切换闪屏*/  
  169. .ui-page {    
  170.     backface-visibility: hidden;    
  171.     -webkit-backface-visibility: hidden;  
  172.     -moz-backface-visibility: hidden;  
  173. }   

手机上的运行效果：

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

上一篇：HTML5移动开发之路（45）——汇率计算器【1】

下一篇：HTML5移动开发之路（47）——jquery mobile基本的页面框架

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

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

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

16024965号-6