小强的HTML5移动开发之路（49）——HTML5开发神器HBuilder

最新推荐文章于 2022-10-10 13:17:07 发布
转载 最新推荐文章于 2022-10-10 13:17:07 发布 · 573 阅读 · 0

本文介绍了一个简单的汇率设置页面实现过程，展示了如何通过HTML和CSS构建界面，并提供了完整的源代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

[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">100</span><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">100</span><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">100</span><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">100</span><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">100</span><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">100</span><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">100</span><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. <!doctype html>  
  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">100</span><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">100</span><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">100</span><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">100</span><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">100</span><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">100</span><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">100</span><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. }   
手机上的运行效果：

小小IT人
关注
小强的HTML5移动开发之路（9）——坦克大战游戏3
水寒
01-02 5006
上一篇我们创建了敌人的坦克和自己的坦克，接下来就应该让坦克发子弹了，我们下面来看一下如何让我们的坦克发出子弹。 前面我们用面向对象的思想对Tank进行了封装，又利用对象冒充实现了我们的坦克和敌人的坦克，仿照这种方式我们是不是也应该封装一个Bullet，答案是肯定的。好吧，那么我们再想想这个Bullet"类“都应该封装什么东西呢？位置应该有吧、子弹飞行的方向应该有吧、飞行的速度也应该有吧、自己飞出
小强的HTML5移动开发之路（8）——坦克大战游戏2
水寒
01-01 6613
在上一篇文章中我们已经画出了自己的坦克，并且可以控制自己的坦克移动，我们继续接着上一篇来实现我们的坦克大战游戏吧。 一、将JS文件分离出来 使用OO的思想，我们已经对坦克进行了封装，对画坦克也进行了封装，下面我们将这两个对象提取到外部的js文件中，文件内容如下： //定义一个Hero类(后面还要改进） //x表示坦克的横坐标 //y表示纵坐标 //direct表示方向 functi
Html学习笔记---hover
time
02-13 1848
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .pg-header{ po
H5开发是什么？
小汤圆的博客
07-12 7415
H5开发就是HTML5开发。 H5能自适应手机端，相当于一个链接，一个页面。 也许百度H5，会出现一系列像易企秀一样做页面宣传的东西。不过，想想也没错啊，不也和网页一样吗，只是对手机端友好。HTML5比传统的HTML，不就是由于它的强大的标签，以及强大的样式，应运而生了它的自适应吗？适应了手机。 总之，技术上所说的H5开发就是HTML5,所以说，没有必要想的太高级。 ...
hover用法
不懂夜的黑
04-28 1586
hover(over,out) 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。 当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移...
菜鸟学习笔记——前端开发（HBuilder）——CSS（2）
zhihuiyu123的博客
06-06 5641
隔了好几天，继续学习！文本练习：（1）：文本对齐原图：练习图：练后感：比较简单，text-align（center、left、right），&lt;b&gt;，    *    &amp;quot；（“）（2）文本的其他属性：由于看了一下这些属性除了text-align、color其余的都不怎么熟悉，就一起都学习+练习了吧~...
hBuilder应用
xiaokanshijie的博客
05-29 1634
3.关于我对hBuilder的一些使用 起初我想做的是一个类似于微信的东西，我比较感兴趣这一方面，一个实现聊天功能的软件，后来因为需求我在我我的基础上改成了农业大数据收集app，根据用户需求我总结了我需要解决的几个问题。 1）解决页面与页面之间的跳转问题，并进行传值。 2）解决当我点击单选框的时候可以跳转到相应的页面，在该页面的...
HTML5视频播放器示例：小强移动开发博客
4. 标签和描述中的信息：本知识点涉及的“小强的HTML5移动开发之路系列博客”，暗示这是一个可能提供连续教学内容的博客资源。视频播放器的示例是该系列博客中的一个具体案例，用于指导开发者如何实现HTML5视频播放...
小强的HTML5移动开发之路（4）——CSS2和CSS3
水寒
12-29 7738
在上一篇中我们提到学习HTML5要具备CSS的知识，在页面设计的时候HTML5知识页面的布局与结构，要实现一个很绚丽漂亮的界面就需要借助CSS。下面我们先来回顾一下css2的基本用法，再来看看和css3的关系与区别。1、css是什么？cascading stylesheet(级联样式表)，为网页提供表现形式。按照w3c规范，设计一个网页，应该将网页的数据与结构写在html文件里，网页的外观写在cs
小强的HTML5移动开发之路（11）——链接，图片，表格，框架
水寒
01-11 6659
一、HTML是什么？ HTML(hypertext mark-uplanguage)是 超文本标记语言, 主要的用处是做网页, 可以在网页上显示 文字、图像、视频、声音… HTML只能做静态网页 二、HTML发展历史 html之父-Tim Berners-Lee 蒂姆·伯纳斯－李（Tim Berners-Lee）1955年6月8日出生于英国伦敦 关于详细请看：h
利用 HBuilderX 设置新闻中心版式
听风者i的博客
10-10 3825
利用 HBuilderX 设置新闻中心版式
HbuilderX 静态常规操作 快忘快看
guozhe888的博客
01-06 7327
一、HbuilderX的静态使用 自动缩进快捷键：Ctrl+K 1.style里的常用标签内容 width: 100px; 设置宽度 height: 100px; 设置高度 padding:5px; 内边距(顺时针上右下左) margin:5px; 外边距(顺时针上右下左) border: 1px solid #FF0000; 边线: 线粗 实线 颜色 background-color: black; 设置背景颜色 text-a
使用HBuilder制作一个简单的HTML5网页
热门推荐
m0_53156691的博客
01-15 3万+
使用HBuilder制作一个简单的HTML5网页 写在前面：开始入门网页制作，写下第一篇博文作为记录。纯纯小白一个，如有阅览者，欢迎批评指正！❤ 先放上效果图： 使用HBuilderX编辑器创建一个“基本HTML项目”： 双击index.html打开页面，项目中已经默认生成了HTML5所需要的结构，代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>&
uniapp+hbuilder学习记录
weixin_37480339的博客
11-19 1535
项目结构 ——pages ---- 存放页面 ——static ---- 存放静态资源 ——unpackage ---- 存放最终打包输出的文件 ——dist ——App.vue ---- 项目的根组件（页面的入口文件） 所有页面都是在App.vue下进行切换的，可以调用应用的生命周期函数 main.js ---- 项目的入口文件 ，主要作用：初始化vue实例并使用需要的插件 manifest.json ---- 配置应用的打包的文件 pages.json ---- 配置页面的存放路径以及
HBuilder中的遍历添加数据+全选+删除+批量删除+更改+排序
kybkq1314的博客
11-19 5917
模拟 var app = angular.module("myapp",[]); app.controller("mycon",function($scope){ $scope.mohu=""; $scope.pxfs=""; $scope.qxz="--请选择--"; $scope.orderFlag=""; $scope.orde
css hover对其包含的元素进行样式设置
dingbenji5337的博客
07-17 198
<ul class="icon-down-single-arr-li"> <li> <a href="javascript:void(0)">价格<span class="icon-all icon-down-single-arr"></span></a> </li&...
hbuilder---制作加载环和加载小火箭动画
weixin_60361911的博客
03-07 1624
新建html文件，在body中添加两个div标签（一个为加载环，一个嵌套添加图片），新建css文件，给html文件添加link链接； <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="./css/homework.css"/&gt...
h5项目开发入门指北
qq_41022872的博客
10-17 1819
h5项目开发入门指北 最近刚接触公司的h5项目，踩了很多坑，问了很多问题，希望能记录下来帮助大家少走弯路。 1.安装抓包工具-Charles （除了Charles还可以使用其他抓包工具这里以Charles举例） 为什么要使用抓包工具呢？我们平时在开发PC端的时候，可以使用Chrome的NetWork调试工具来帮助我们查看网络请求，虽然h5项目在开发阶段同样也能通过Chrome来查看网络请求。但我们往往有这样的场景： 拿到App端内跳转的h5页面地址 查看App中返回的数据是否正确（查看数据还可以通过vco
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值