汇率转换表

最新推荐文章于 2023-11-17 13:35:20 发布

greyKing666

最新推荐文章于 2023-11-17 13:35:20 发布

阅读量380

点赞数

分类专栏： WEB前端文章标签： css html

本文链接：https://blog.csdn.net/gy99csdn/article/details/113856982

版权

WEB前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

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

<!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>