css写一个计算器叭

最新推荐文章于 2023-09-29 00:38:43 发布

deliefu3790

最新推荐文章于 2023-09-29 00:38:43 发布

阅读量133

点赞数

原文链接：http://www.cnblogs.com/sandraryan/p/11218118.html

版权

显示效果如图，emoji可替换为数字。

代码是这样的：

因为不是很难（因为我很懒），就不多加说明了，具体参考代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .wrap {
        width: 500px;
        border: 1px solid lightgray;
        margin: 50px auto;
    }
    .main {
        display: flex;
        flex-wrap: wrap;
    }
    .main span {
        line-height: 49px;
        display: inline-block;
        width: 49px;
        border: 1px solid lightgray;
        text-align: center;
        height: 49px;
        border-right: none;
        border-bottom: none;
    }
    .main>span:nth-last-child(3) {
        flex: 1;
    }
    .top {
        padding: 20px 10px;
        background-color: lightgray;

    }
    .top span {
        display: inline-block;
        width: 14px;height: 14px;
        border-radius: 50%;
    }
    .top p {
        font-size: 40px;
        font-weight: 100;
        text-align: right;
        margin: 0;padding: 0;
        color: white;
    }
    .top>span:first-child {
        background-color: red;
    }
    .top>span:nth-child(2) {
        background-color: orange;
    }
    .top>span:nth-child(3) {
        background-color: green;
    }
    .main span:nth-child(10n),.main span:last-child {
        background-color: rgb(161, 204, 243);
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="top">
            <span></span>
            <span></span>
            <span></span>
            <p>????????</p>
        </div>
        <div class="main">
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>?</span>
            <span>☕</span>
            <span>???</span>
            <span>?</span>
            <span>?</span>
        </div>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/sandraryan/p/11218118.html

deliefu3790

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css写一个计算器叭

显示效果如图，emoji可替换为数字。代码是这样的：因为不是很难（因为我很懒），就不多加说明了，具体参考代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content...
复制链接

扫一扫