网络安全--PHP编程与系统开发-05-DIV+CSS重构计算机-CSDN博客

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

计算机样式图

不具备具体功能只有样式代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DIV计算器</title>
    <style>
        /* 设置顶部标题栏样式 */
        #top{
            width: 450px;
            height: 50px;
            margin: auto;
            /* border-radius: 5px; */
            background-color: grey;
            border-top-left-radius: 10px; /*左上角圆弧*/
            border-top-right-radius: 10px; /*右上角圆弧*/
        }
        #top .point{
            width: 20px;
            height: 20px;
            float: left;
            margin-left: 10px;
            margin-top: 15px;
            border-radius: 10px;
        }
        #top .red{
            background-color: red;
        }
        #top .blue{
            background-color: blue;
        }
        #top .green{
            background-color: green;
        }
        #calc-title{
            float: right;
            margin: 10px 10px 0 0;
            font-size: 22px;
            color: white;
                
        }
        /* 设置结果栏样式 */
        #result{
            width: 446px;
            height: 50px;
            margin: auto;
            background-color: grey;
            border: solid 2px grey;
            
        }
        #result div{
            width: 440px;
            height: 46px;
            margin: auto;
            background-color: aliceblue;
            
        }
        /* 按钮区域的样式 */
        #button{
            width: 450px;
            height: 400px;
            background-color: gray;
            margin: auto;
        }
        #button div{
            width: 108px;
            height: 73px;
            float: left;
            margin-top: 2px;
            background-color: aqua;
            border: solid 2px gray;
            line-height: 80px; 
            text-align: center;  /*文字内容水平居中*/
            font-size: 22px;
        }
        /* 鼠标悬停效果 */
        #button div:hover{
            background-color: coral;

        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div id="top">
        <div class="point red"></div>
        <div class="point blue"></div>
        <div class="point green"></div>
        <div id="calc-title">计算器</div>
    </div>
    <!-- 结果 -->
    <div id="result">
        <div></div>
    </div>
    <!-- 按钮 -->
    <div id="button">
        <div>AC</div>
        <div>+/-</div>
        <div>%</div>
        <div>/</div>

        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>*</div>

        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>-</div>

        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>+</div>

        <div>0</div>
        <div>删除</div>
        <div>.</div>
        <div>=</div>
    
    </div>
</body>
</html>