美元人民币汇率换算器 - 在线工具

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美元人民币汇率换算器</title>
    <style>
        .selection-handle {
            height: 23px;
        }
        .selection-input {
            height: 20px;
            padding-left: 0;
            margin: 10px auto;
        }
        .table-view {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            height: 100px;
            width: 400px;
            border: 1px solid black;
            align-items: center;
        }
        .exchange-result {
            background-color: red;
            text-align: center;
            margin-bottom: 10px;
            color: black;
        }
        .exchange-money {
            border: 1px solid black;
            text-align: center;
            display:flex;
            flex-direction: column;
            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>
            <input type="text" value="100" readonly>
        </div>
        <div class="exchange-money">
            <div>汇率</div>
            <input type="text" value="6" readonly>
        </div>
        <div class="exchange-money">
            <div>人民币</div>
            <input type="text" value="600" readonly>
        </div>
    </div>
</div>
</body>
</html>