先来看看效果
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="format-detection" content="telephone=no,email=no" />
<title>汇率换算</title>
<link rel="stylesheet" type="text/css" href="resource/css/hl/hl.css"/>
<script>
!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
</script>
<script src="resource/js/lib/jquery.min.js" type="text/javascript"></script>
<script src="resource/js/lib/scroll-probe.js" type="text/javascript"></script>
</head>
<body>
<!--header start-->
<header class="trade-header">
<section class="header-wrap">
<a href="javascript:void(history.back());" class="wap-back"></a>
<p>汇率换算</p>
<!--<a href="income.html" class="header-trade">链接</a>-->
</section>
</header>
<!--header end-->
<div class="wrap">
<div class="hl-item">
<div class="hl-select-up bzhl">
<button>
<div class="hl-countryname">
马来西亚林吉特㎡ YR
</div>
<div class="hl-jiantou">></div>
</button>
</div>
<input type="number" id="bzh-input" class="input" value="1" autofocus="autofocus"/>
<span class="input-delico"></span>
</div>
<div class="hl-item">
<div class="hl-select-up zhl">
<button>
<div class="hl-countryname">
人名币CNY
</div>
<div class="hl-jiantou">></div>
</button>
</div>
<input type="number" id="zh-input" class="input"/>
<span class="input-delico"></span>
</div>
<div class="hl-tips">
数据仅供参考，更新时间：<span>2017-02-25</span>
</div>
<button class="hl-button" id="hl-submit" disabled="disabled">确认</button>
</div>
<!--页面 end-->
<div class="select-wrap">
<div class="hl-search">
<div class="hl-search-input-wrap">
<span class="hl-search-ico"></span>
<input type="text" placeholder="输入货币名称,币种缩写" class="hl-search-input"/>
<span class="hl-search-input-delico"></span>
</div>
<button class="hl-qx">取消</button>
</div>
<div class="hb-item-title-fixed"></div>
<div class="seachResout"></div>
<div class="nodata">
没有找到"<span class="nodataval"></span>"相关结果
</div>
<div class="silder" id="wrapper">
<div class="scroll" id="Scroll">
</div>
</div>
</div>
<!--<div class="mask"></div>-->
<script src="resource/js/lib/url.js" type="text/javascript"></script>
<script src="resource/js/hl/hl.js" type="text/javascript"></script>
</body>
</html>
css:
@charset "UTF-8";
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent; }
*:not(input, textarea) {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none; }
html, body, ul, ol, li, dl, dt, dd, p, h1, h2, h3, h4, h5, h6, a, img, th, td, form, fieldset, iframe, object, pre, code, legend, blockquote {
margin: 0;
padding: 0;
border: 0;
outline: 0; }
html, body {
width: 100%;
height: 100%; }
html {
color: #000;
background: #fff;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
body {
word-wrap: break-word; }
body, button, input, select, textarea {
font: 400 12px/1.5 'PingFang SC', 'HelveticaLight', 'Helvetica Neue', 'Microsoft Yahei','Heiti SC', tahoma,arial,sans-serif; }
ol, ul, li {
list-style: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
a {
color: #333;
text-decoration: none;
border: none;
outline: none; }
a:hover {
text-decoration: none; }
img {
border: none;
vertical-align: middle; }
button,
input[type=button],
input[type=submit],
input[type=text] {
cursor: pointer;
outline: none;
-webkit-appearance: none;
appearance: none; }
input:focus {
outline: none; }
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0; }
h1, h2, h3, h4, h5, h6 {
font-size: 100%; }
/* clear float */
.clearfix:after {
display: block;
content: "";
height: 0;
clear: both;
visibility: hidden; }
.clearfix {
zoom: 1; }
/*表单*/
input, textarea {
-webkit-appearance: none;
appearance: none;
border-radius: 0; }
button {
border: none; }
/*缩放1px为0.5px*/
.trade-header {
position: fixed;
left: 0;
top: 0;
border-bottom: 1px solid #ddd;
background: #fff;
width: 100%;
height: 1.16rem;
z-index: 99; }
.header-wrap {
position: relative; }
.header-wrap .wap-back {
position: absolute;
top: 0;
left: 0.32rem;
display: block;
width: 0.306666rem;
height: 0.573333rem;
background: url(../../images/htj-back.png) no-repeat;
background-size: contain; }
.header-wrap p {
margin-top: 0.293333rem;
text-align: center;
font-size: 0.453333rem;
color: #4c566c; }
.header-wrap .header-trade {
position: absolute;
top: 0;
right: 0.32rem;
margin-top: 0;
font-size: 0.4rem; }
.select-wrap {
position: fixed;
width: 100%;
height: 100%;
top: 100%;
left: 0;
background-color: #f7f9ff;
padding-top: 1.16rem;
transition: all .6s; }
.hl-search-input {
outline: none;
border: 0;
padding: 0.213333rem 0; }
.hl-search-input-wrap {
width: 8.24rem;
border: 1px solid #d3d6de;
border-radius: 1.066666rem;
margin: 0.266666rem 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 0 0.266666rem;
overflow: hidden; }
.hl-search-input-wrap .hl-search-ico {
flex: 0 0 0 0.346666rem;
background: url(../../images/Search-Icon.png) no-repeat;
width: 0.346666rem;
height: 0.346666rem;
background-size: 100% 100%; }
.hl-search-input-wrap .hl-search-input {
width: 100%;
text-indent: 0.133333rem; }
.hl-search-input-wrap .hl-search-input-delico {
background: url(../../images/close.png) no-repeat;
width: 0.44rem;
height: 0.44rem;
position: absolute;
background-size: 100% 100%;
right: 0.266666rem;
top: 50%;
margin-top: -0.22rem;
visibility: hidden; }
.hl-search-input-wrap .del-show {
visibility: visible; }
.hl-search {
display: flex;
align-items: center;
justify-content: center;
background-color: #fff; }
.hl-qx {
font-size: 0.4rem;
color: #4c566c;
background-color: transparent;
outline: none;
border: 0;
width: 1.13333rem;
padding: 0; }
.silder {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #fff; }
.silder .scroll {
padding-bottom: 58px; }
.hb-item-title-wrap {
height: 0.506666rem;
width: 100%; }
.hb-item-title {
padding: 0 0.266666rem;
background-color: #f7f9ff;
font-size: 0.32rem;
color: #949aa7;
height: 0.506666rem;
line-height: 0.506666rem; }
.hb-item-title-fixed {
padding: 0 0.266666rem;
position: fixed;
top: 2.633333rem;
height: 0.506666rem;
line-height: 0.506666rem;
left: 0;
width: 100%;
color: #c8a663;
background-color: #fff;
border-bottom: 1px solid #e5e5e5;
z-index: 20;
box-sizing: border-box;
display: none; }
.hb-item-select {
padding: 0.4rem 0.266666rem;
border-bottom: 1px solid #e5e5e5;
font-size: 0.426666rem;
color: #262b36; }
.seachResout {
display: none;
background-color: #fff; }
.seachResout-item {
padding: 0.4rem 0.266666rem;
border-bottom: 1px solid #e5e5e5;
font-size: 0.426666rem;
color: #262b36; }
.nodata {
display: none;
padding: 1.386666rem 0;
width: 100%;
最低0.47元/天 解锁文章
2761
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
