前端页面构造计算器

YhMjQx

于 2024-08-25 13:57:22 发布

阅读量194

点赞数 3

分类专栏： PHP编程与系统开发文章标签：前端

本文链接：https://blog.csdn.net/YhMjQx/article/details/141528644

版权

PHP编程与系统开发专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章目录

==表格实现计算器布局==
==DIV+CSS重构计算器==

表格实现计算器布局

计算器结果如图所示，我们将其分为两个表格

第一个表格两行一列
- 第一行，灰色背景图，确定宽高，右侧文字，难点在于三个圆点（使用class类的方式分别修饰）
- 第二行，白色框，
第二个表格五行四列
- 分别插入数据，用 button tr td的单元格class类即可完成快速修改
- button 类是第二个表格的整体，button tr td是表格中每一个单元格

DIV+CSS重构计算器

一、分析页面结构

二、前端布局实现

1.顶部DIV

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DIVcalc</title>
    <style>
        /* 设计顶部样式栏 */
        #top {
            background-color: grey;
            width: 450px;
            height: 50px;
            margin: auto;
            margin-top: 100px;
        }
        .point {
            width: 20px;
            height: 20px;
            float: left;
            margin-left: 10px;
            margin-top: 15px;
            border-radius: 50%;

        }
        #top .red {
            background-color: red;
        }
        #top .green {
            background-color: green;
        }
        #top .blue {
            background-color: blue;
        }
        #top .calc-title {
            float: right;
            margin-right: 20px;
            margin-top: 8px;
            color: whitesmoke;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div id="top">
        <div class="point red"></div>
        <div class="point green"></div>
        <div class="point blue"></div>
        <div class="calc-title">DIV版蜗牛计算器</DIV></div>
    </div>
</body>
</html>