我正在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 - 问题:在HTML/CSS中的计算器上创建按钮(仅设计),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55480611/