HTML绘制计算器

html

HTML中有一个table标签，如果设置合理的样式，则会让这个表格变得与计算器相似。当然这里仅仅只是一个趣味性的外观尝试，并未实现任何功能。

HTML的table标签形成的计算器外观

实现思想：增大表格外边框的宽度和单元格之间的间隔。另外为了更像一些，还需要将所有单元格的宽度和高度设置为固定值，以及设置一些背景颜色。

其主要实现代码如下：

<!DOCTYPE html>
<!--
    作者：songwh
    时间：2018-09-26
    描述：这是一个模拟计算器外形的表格文件
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title>模拟计算器外形的表格</title>
    </head>
    <body>
        <p></p>
        <table border="10" cellspacing="10" cellpadding="10" align="center">
            <tr style="background-color: darkgrey;">
                <th colspan="4" align="right">0</th>
            </tr>
            <tr align="center">
                <td style="width: 30px; background-color:#eee">M</td>
                <td style="width: 30px; background-color:#eee">M+</td>
                <td style="width: 30px; background-color:#eee">C</td>
                <td style="width: 30px; background-color:#eee">+</td>
            </tr>
            <tr align="center">
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td style="background-color:#eee;">-</td>
            </tr>
            <tr align="center">
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td style="background-color:#eee;">x</td>
            </tr>
            <tr align="center">
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td style="background-color:#eee;">/</td>
            </tr>
            <tr align="center">
                <td>0</td>
                <td style="background-color:#eee;">.</td>
                <td style="background-color:#eee;">+/-</td>
                <td style="background-color:#eee;">=</td>
            </tr>

        </table>
    </body>
</html>

HTML绘制计算器

HTML绘制计算器

猜你喜欢