DIV+CSS重构计算机

最新推荐文章于 2023-11-22 10:01:03 发布

qq_45616828

最新推荐文章于 2023-11-22 10:01:03 发布

阅读量66

点赞数

文章标签： css 重构 html

本文链接：https://blog.csdn.net/qq_45616828/article/details/127284124

版权

一、用div构造上边的一栏

二、用div构造中间一栏

三、用div构造20个小div

代码如下：

<!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;
            background-color: gray;
            /* border-radius: 10px; */
             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 {
            font-size: 22px;
            color: white;
            float: right;
            margin-top: 10px;
            margin-right: 10px;
        }

        /* 设置结果显示栏样式 */
        #result {
            width: 446px;
            height: 50px;
            margin: auto;
            background-color: white;
            border: solid 2px red;

        }

        /* 设置按钮区域的样式 */
        #button {
            width: 450px;
            height: 422px;
            background-color: gray;
            margin: auto;
            border-bottom-left-radius: 15px; 
            border-bottom-right-radius: 15px; 
        }

        #button div {
            width: 108px;
            height: 80px;
            float: left;
            background-color: #7fffd4;
            margin: 2px;
            line-height: 80px;
            text-align: center;
            font-size: 26px;
        }

        /* 使用伪类选择器设置鼠标悬停效果 */
        #button div:hover {
            background-color: orangered;
        }

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