网络安全--PHP编程与系统开发-03-表格事先计算器的布局

认证搬砖大师

已于 2022-08-08 00:35:10 修改

阅读量32

点赞数

分类专栏：网络安全文章标签： html css 前端

于 2022-08-07 22:27:37 首次发布

本文链接：https://blog.csdn.net/m0_70568918/article/details/126218474

版权

网络安全同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  <!--设置字符集-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--设置与IE和Edge的兼容-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--设置手机上的显示效果-->
    <title>Chris Cornell计算器</title>
    <style>
        /* 类选择器以.开头 */
        .button{
            background-color:gray ; /*设置背景色的颜色*/
            margin: auto; /*设置容器水平居中 */
        }
        /* 层次选择器，选择button类下的所有标签设置为白色*/
        .button tr td{
            background-color: #7fffd4;
            width: 25%;
            text-align: center;
            font-size: 30px;
        }
        .point-red{
            width: 20px;
            height: 20px;
            background-color: red;
            float: left;
            margin: 10px;
            border-radius: 50%;
        }
        .point-blue{
            width: 20px;
            height: 20px;
            background-color: rgb(39, 12, 214);
            float: left;
            margin: 10px;
            border-radius: 50%;
        }
        .point-green{
            width: 20px;
            height: 20px;
            background-color: rgb(25, 230, 59);
            float: left;
            margin: 10px;
            border-radius: 50%;
        }
        .title{
            color: white;
            font-size: 20px;
            float: right;
            margin: 10px;
        }
    </style>
</head>
<body>
    <!-- 两行一列表格，完成顶部和结果栏 -->
    <table width="450" height="120" border="0" bgcolor="gray" cellspcing="5" align="center">
        <tr>
            <td bgcolor="gray" height="50">
                <div class="point-red"></div>
                <div class="point-blue"></div>
                <div class="point-green"></div>
                <div class="title">计算器</div>
            </td>
        </tr>
        <tr>
            <td bgcolor="white" style="border: solid 2px red;">
               
            </td>
        </tr>
    </table>
    <!-- 五行四列，绘制计算器按钮 -->
    <table width="450" height="500" border="0" align="center" cellspcing="5" class="button">
        <tr>
            <td>AC</td>
            <td>+/-</td>
            <td>%</td>
            <td>/</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>*</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>-</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>+</td>
        </tr>
        <tr>
            <td>0</td>
            <td>删除</td>
            <td>.</td>
            <td>=</td>
        </tr>
    </table>
</body>
</html>