| HTML5移动如何实现汇率计算器 | 您所在的位置：网站首页 › images/title1.png › HTML5移动如何实现汇率计算器 |
HTML5移动如何实现汇率计算器
|
HTML5移动如何实现汇率计算器
发布时间：2021-03-06 10:57:23
来源：亿速云
阅读：150
作者：小新
栏目：web开发
这篇文章将为大家详细讲解有关HTML5移动如何实现汇率计算器，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 php实现汇率设置页面的显示 100美元 = 人民币 100日元 = 人民币 100里尔 = 人民币 100新加坡元 = 人民币 100欧元 = 人民币 100克朗 = 人民币 100英镑 = 人民币下面给出全部界面的源码： index.html 无标题文档 人民币 美元 日元 里尔 新加坡元 欧元 克朗 英镑 100美元 = 人民币 100日元 = 人民币 100里尔 = 人民币 100新加坡元 = 人民币 100欧元 = 人民币 100克朗 = 人民币 100英镑 = 人民币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移动如何实现汇率计算器”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。 推荐内容：如何实现html5实现移动端下拉刷新 免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。 html5 汇率计算器 上一篇新闻：云计算的主要服务形式有哪些 下一篇新闻：HTML5实现3D全景的示例 猜你喜欢 sass和bootstrap有什么区别 HTML5怎样实现图片无限加载瀑布流效果 Shell逐行处理文本求和的示例分析 这么在Spring Cloud中使用Sleuth JavaScript运算符的示例分析 Java中原型模式的示例分析 JavaScript中回调、Promise和Async/Await的示例分析 2021最新TIOBE编程语言排行榜 Spring中如何进行日常Bug排查 Javascript中运算符的示例分析 |
【本文地址】
公司简介
联系我们