汇率转换表

在这里插入图片描述
实现方式一:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>汇率转换</title>
</head>
<select >
    <option >123</option>
    <option>456</option>
    <option>789</option>
</select>
<button>互换</button>
<select >
    <option >123</option>
    <option>456</option>
    <option>789</option>
</select>
数额:<input type="text" value="123">
<button>汇率转换</button>
<body>
<table border="1px" width="500px" cellpadding="3" cellspacing="3">
<tr bgcolor="red">
    <td colspan="3" align="middle">按当前汇率兑换结果</td>
</tr>
    <tr>
        <th>1</th>
        <th>1</th>
        <th>1</th>
    </tr>
    <tr>
        <th>1</th>
        <th>1</th>
        <th>1</th>
    </tr>
</table>
</body>
</html>

实现方式二:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td{
     
     
           width: 200px;
            height: 30px;
            text-align: center;
        }
        /*属性选择器*/
        [colspan]{
     
     
            background: red;
        }
        div{
     
     
            margin: 0 0 5px 0;
        }

        select{
     
     
            height: 35px;
        }
        button{
     
     
            height: 33px;
        }
        input{
     
     
            height: 30px;
        }
    </style>
</head>
<body>

    <div>
        <select>
            <option>美元</option>
        </select>
        <button>互换</button>
        <select>
            <option>美元</option>
        </select>
        数额:
        <input>
        <button>按汇率换算</button>

    </div>
    <table border="1">
        <tr>
            <td colspan="3">按当前汇率换算结果</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>

    </table>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/gy99csdn/article/details/113856982