货币兑换器：实时汇率换算工具
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>货币兑换器 - 实时汇率换算</title>
<style>
.selection-handle {
height: 23px;
/* width: 50px;*/
}
.selection-input {
height: 20px;
padding-left: 0;
margin: 10px auto;
}
.table-view {
height: 200px;
width: 400px;
border: 1px solid black;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 5px;
align-items: center;
justify-items: center;
}
.exchange-result {
grid-column: 1 / 4;
background-color: red;
text-align: center;
margin-bottom: 10px;
color: black;
}
.exchange-money {
height: 40px;
width: 100px;
border: 1px solid black;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div>
<select class="selection-handle">
<option>美元</option>
<option>人民币</option>
<option>澳元</option>
<option>英镑</option>
<option>欧元</option>
</select>
<button>互换</button>
<select class="selection-handle">
<option>美元</option>
<option>人民币</option>
<option>澳元</option>
<option>英镑</option>
<option>欧元</option>
</select>
<span>数额:</span>
<input class="selection-input">
<button>汇率换算</button>
<div class="table-view">
<div class="exchange-result">按当前汇率兑换结果</div>
<div class="exchange-money">美元</div>
<div class="exchange-money">汇率</div>
<div class="exchange-money">人民币</div>
<div class="exchange-money">100</div>
<div class="exchange-money">6</div>
<div class="exchange-money">600</div>
</div>
</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/qeaq 著作权归作者所有。请勿转载和采集!