html - 问题 : Creation of a button on a calculator in HTML/CSS (Design only)-6ren

html - 问题 : Creation of a button on a calculator in HTML/CSS (Design only)

转载作者：行者123 更新时间：2023-11-28 00:09:24

26

4

我正在用 HTML/CSS 构建一个计算器。我有一些按钮。其中两个略有不同——我只想改变这两个按钮的颜色(变成蓝色)。但我是 HTML 的初学者，我不想重复我的代码。所以我问你:如何创建这两个按钮，它们与任何其他按钮相似，只是背景颜色不同？

我的计算器是:https://pasteboard.co/I8iFbTB.jpg .

例如，在 OOP 中，我创建了一个按钮类(父亲)和继承它的儿子。它们之间的唯一区别是儿子的代码中多了一行:背景颜色。不需要复制粘贴(正是我想在 HTML 中做的)，“Dbutton”将继承“button”(这里有一段HTML代码)。我写了一个有效的代码。我只需要删除 Dbutton 上的一些行。

任何帮助将不胜感激!

海姆

我的代码:

    <!DOCTYPE html>
<html>
<head>
<title>Lab 1 example</title>
<meta charset="utf-8" />
<style>

    body {
        font-family: Verdana, Ariel;
        margin: 140px;
    }
    p1 {
        color: white;
        font-size: 30px;
        position: relative;
        left: 15px;
        top: 00px;
        padding-left: 2%;
        margin-top: 1%;
    }

    p2 {
        color: black;
        font-size: 30px;
        padding-right: 1%;
        padding-bottom: 2%;
        position: relative;
        top: 60px;
    }


    #monitor {
        background-color: lightgreen;
        color: black;
        font-size: 30px;
        border: 3px solid red;
        width: 90%;
        height: 20%;
        padding-right: 3%;
        margin: auto;
        position: relative;
        left: 01px;
        top: 10px;
        text-align: right;

    }

    .button {
        float: left;
        width: 12%;
        height: 8%;
        border: 2px solid silver;
        cursor: pointer;
        text-align: center;
        padding: 10px;
        color: white;
        padding-left: 5%;
        position: relative;
        left: 35px;
        top: 30px;
    }

    .Dbutton {      //$=this is duplication (I don`t need it)
        float: left;  //$
        width: 12%;   //$ 
        height: 8%;   //$
        border: 2px solid silver;   //$
        cursor: pointer;   //$
        text-align: center;  //$
        padding: 10px;   //$
        color: white;   //$
        padding-left: 5%;   //$
        position: relative;   //$
        left: 35px;  //$
        top: 30px;  //$
        background-color: blue;  //onle need this line
    }

        .button:hover {
            background-color: darkkhaki;
        }


</style>
</head>
<body>
<div style=" width: 380px; height:530px; margin: 10px auto; border:     05px solid blue; background-color: black;">
    <p1 align="right"><strong>Casio</strong></p1>
    <!--monitor-->
    <div id="monitor"><p2>0</p2></div>
    <!--buttons-->
    <div class="button">1</div>
    <div class="button">2</div>
    <div class="button">3</div>
    <div class="button">+</div>
    <div class="button">4</div>
    <div class="button">5</div>
    <div class="button">6</div>
    <div class="button">-</div>
    <div class="button">7</div>
    <div class="button">8</div>
    <div class="button">9</div>
    <div class="button">X</div>
    <div class="button">.</div>
    <div class="button">0</div>
    <div class="button">=</div>
    <div class="button">%</div>
        <div class="Dbutton">DEL</div>
        <div class="Dbutton">CLR</div>
    <div style="clear:both"></div>

</div>

</body>
</html>

最佳答案

可以在css中加入常用设置:

.button,
.Dbutton {
    float: left;
    width: 12%;
    height: 8%;
    border: 2px solid silver;
    cursor: pointer;
    text-align: center;
    padding: 10px;
    color: white;
    padding-left: 5%;
    position: relative;
    left: 35px;
    top: 30px;
}
.Dbutton {
    background-color: blue;  //onle need this line
}

关于html - 问题 : Creation of a button on a calculator in HTML/CSS (Design only)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55480611/

26

4

0

文章推荐： html - 使用 CSS 在 div 中水平分布不同的元素

文章推荐： c++ - 在另一个线程中分配唯一 ptr 的错误

文章推荐： c++ - 汽车模拟器 - 无限循环

html -
android - Button button=(Button) findViewbyID(R.id.button); 有什么区别？和按钮按钮=新按钮；在安卓？
Button button= (Button) findViewbyID(R.id.button); 和 Button button = new Button(this); 有什么区别？最佳答案有
html -
android - Button button = findViewById(R.id.button) 在 Android 中总是解析为 null
我是 Android 开发新手，请原谅我的无知。我添加的按钮的 findViewById 始终解析为 null。因此，如果我尝试 setonClickListener，整个 Activity 都会失败
objective-c - 操作系统 X : Get mouse button position of button greater then the three standard buttons
是否有一种简单的方法可以确定多按钮鼠标(具有三个以上按钮)上的按钮是否被单击？例如五键鼠标上的第五个按钮。我知道这是可能的，因为 USB Overdrive 和 Smart Scroll 等应用程
android - com.google.android.things.contrib.driver.button.Button 与 android.widget.Button
我是 Java/Android 新手。我正在尝试使用来自 android.widget.Button 和 com.google.android.things.contrib.driver.button
javascript - ASP.NET C# but still acting like
正如标题所述，上面的代码行是我的 Master.master 页面中的内容。但是当我运行调试器(Visual Studio 2017)时，Chrome 和应用程序通过回发运行按钮，当我检查该元素时
button - Sencha Touch Button - 暂停直到显示
我想延迟显示 sencha 触摸按钮元素几秒钟。我该怎么做？我有以下[项目] xtype: 'button',
button - Javafx : Activate a tooltip with a button
我正在将 JavaFx 用于一个小应用程序，并且希望在用户单击“帮助”按钮时在 textArea 上显示工具提示。将工具提示链接到我的 textArea 没问题，但是当用户单击按钮时无法激活它。有没
button - 创新设置 : Multiple Next Buttons
我想在我的安装程序屏幕上有两个按钮，两个按钮最终都应该将用户带到下一个屏幕，但每个按钮都执行自己的侧逻辑。是否有可能有两个 NextButtons 都带你到下一个屏幕但执行不同的代码？如果失败，有没有
javascript - jquery选择器:button vs button
jquery选择器“:button”和“button”有什么区别。 jquery文档api说“:button”选择所有按钮元素，但这就是普通jquery选择器所做的事情，如果我用普通选择器“butto
button - OpenLayers.Control.Button 的触发参数不会被调用
我正在尝试向 OpenLayers map 添加一个按钮，单击该按钮时应该调用 JS 函数。我已经设法让它按照我想要的方式显示，但触发器功能不起作用。如果我有 Control.Navigation
button - 瓦丁 : Upload button listener
如何获取组件上传的上传按钮监听器？这是因为我想在单击上传按钮时验证其他字段。我试过添加... upload.addListener(new Upload.StartedListener() {});
c# - 一个 Button 会自动添加一个带有名称的新 Button
我是 Xamarin.forms 的新手，所以请耐心等待。我尝试让用户有机会点击一个按钮来创建一个新的按钮，同时最初是按钮名称。用户可以根据需要创建任意数量的按钮，并显示在 ScrollView
javascript - BS4 : Disable Button with a button
我目前正在尝试自学 BS4 以完成我正在开发的项目@work。基本上我有一个按钮组(2 个。左边一个是事件的，右边一个是禁用的)我想做的是禁用左边的按钮并激活右边的按钮，反之亦然。 Here is t
button - 如何强制
javascript - "Button"和 ":button"选择器的问题
我是 Jquery 的新手，处于学习阶段。我在里面写了一个测试程序。 $(document).ready(function(){
html - 而不是
html -
javascript -

首页

博学

6Ren·AI

商城

html - 问题 : Creation of a button on a calculator in HTML/CSS (Design only)