css写一个计算器叭

野性酷女 2023-06-05 08:10 33阅读 0赞

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

![Image 1][]

代码是这样的：

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

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

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关写一个计算器

好的，这是一个简单的 Python 代码来实现计算器： def calculate(expression): 将字符串转换为列表 token

一时失言乱红尘/ 2024年03月27日 17:54/ 0 赞/ 130 阅读

相关用python语言写一个计算器

好的，这是一个简单的 Python 计算器的例子：定义函数 def calculator(x, y,operator): if operato

忘是亡心i/ 2024年03月25日 16:22/ 0 赞/ 124 阅读

相关 css写一个三角形

昨天面试了一个听起来很简单的问题，但是真的很久没有用到了，所以我都搞忘记了如何实现，哎，万万不可忘记很多基础的东西啊，说不定哪天就遇到了！。。 <div class=

川长思鸟来/ 2023年07月12日 14:51/ 0 赞/ 54 阅读

相关 css写一个计算器叭

显示效果如图，emoji可替换为数字。 ![Image 1][] 代码是这样的：因为不是很难（因为我很懒），就不多加说明了，具体参考代码 <!DOCTYPE

野性酷女/ 2023年06月05日 08:10/ 0 赞/ 34 阅读

相关利用Java写的一个计算器

效果 ![在这里插入图片描述][20191102201803132.gif] 代码 package Test; import javax

刺骨的言语ヽ痛彻心扉/ 2023年05月29日 03:20/ 0 赞/ 107 阅读

相关简单的计算器 java_终于写出一个简单的计算器了

该楼层疑似违规已被系统折叠隐藏此楼查看此楼 import javax.swing.\; import java.awt.event.\; import java.awt

Love The Way You Lie/ 2022年11月06日 00:50/ 0 赞/ 266 阅读

相关手写一个HTTP图片资源服务器，太容易了叭！

![0D5F937FE12312312D81F17F.jpg][] 程序员的成长之路互联网/程序员/技术/资料共享 [关注][Link 1] 阅读本文大概需要 8

怼烎@/ 2022年09月09日 06:10/ 0 赞/ 138 阅读

相关 Javascript写一个简单的计算器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的网

快来打我*/ 2022年05月26日 04:17/ 0 赞/ 316 阅读

相关用C语言写一个日期计算器

首先，我们应知道日期计算器包括哪些功能 1、明天的日期 2 、n天后的日期 3、两个日期之间的天数我们先从第一个功能开始，首先创建一个日期的结构体，包括：年、月、

忘是亡心i/ 2022年05月23日 04:21/ 0 赞/ 346 阅读

相关 JS写一个简易计算器

![70][] <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-

淩亂°似流年/ 2021年09月15日 15:16/ 0 赞/ 482 阅读