[分享]css制作计算器源代码

计算器是我们日常生活中经常使用的工具之一。今天我们将通过CSS来制作一个简单的计算器。

HTML代码：
<div class="calculator">
  <div class="display">
    <input type="text" name="result" disabled>
  </div>
  <div class="buttons">
    <button class="number" value="7">7</button>
    <button class="number" value="8">8</button>
    <button class="number" value="9">9</button>
    <button class="operator" value="+">+</button>
    <button class="number" value="4">4</button>
    <button class="number" value="5">5</button>
    <button class="number" value="6">6</button>
    <button class="operator" value="-">-</button>
    <button class="number" value="1">1</button>
    <button class="number" value="2">2</button>
    <button class="number" value="3">3</button>
    <button class="operator" value="*">*</button>
    <button class="number" value="0">0</button>
    <button class="number" value=".">.</button>
    <button class="clear" value="C">C</button>
    <button class="operator" value="/">/</button>
    <button class="equal" value="=">=</button>
  </div>
</div>

CSS代码：
.calculator {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 0 auto;
  padding: 10px;
}

.display input {
  width: 100%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: right;
  font-size: 20px;
  padding: 5px;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  margin-top: 10px;
}

button {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 5px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

button:hover {
  transform: scale(1.1);
}

.number {
  background-color: #eee;
}

.operator {
  background-color: #2196f3;
  color: white;
}

.clear {
  background-color: #f44336;
  color: white;
}

.equal {
  background-color: #4caf50;
  color: white;
}

.equal:hover {
  transform: none;
} 

通过以上代码，我们成功地使用CSS制作了一个简单的计算器。我们设置了计算器的宽度、边框、边框圆角、内边距等样式，以及显示器的文本样式和输入框宽度，按钮样式和交互效果等样式。