当前位置：首页 > CSS

css制作计算器界面

2026-01-08 20:23:32CSS

使用CSS制作计算器界面

制作计算器界面需要结合HTML结构、CSS样式以及可能的JavaScript交互功能。以下是纯CSS部分的实现方法，创建一个基础计算器界面。

HTML结构

先构建一个简单的HTML框架，包含显示屏和按钮区域：

<div class="calculator">
  <div class="display">0</div>
  <div class="buttons">
    <button class="btn operator">AC</button>
    <button class="btn operator">+/-</button>
    <button class="btn operator">%</button>
    <button class="btn operator">÷</button>
    <button class="btn">7</button>
    <button class="btn">8</button>
    <button class="btn">9</button>
    <button class="btn operator">×</button>
    <button class="btn">4</button>
    <button class="btn">5</button>
    <button class="btn">6</button>
    <button class="btn operator">-</button>
    <button class="btn">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>
    <button class="btn operator">+</button>
    <button class="btn zero">0</button>
    <button class="btn">.</button>
    <button class="btn operator equals">=</button>
  </div>
</div>

CSS样式设计

通过CSS实现计算器的外观和布局：

.calculator {
  width: 300px;
  margin: 50px auto;
  border: 2px solid #333;
  border-radius: 10px;
  background-color: #f0f0f0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.display {
  height: 80px;
  padding: 20px;
  background-color: #222;
  color: white;
  font-size: 2.5em;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background-color: #999;
}

.btn {
  height: 70px;
  border: none;
  font-size: 1.5em;
  background-color: #fff;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #ddd;
}

.operator {
  background-color: #f0a30a;
  color: white;
}

.operator:hover {
  background-color: #d18b08;
}

.equals {
  background-color: #f0a30a;
}

.zero {
  grid-column: span 2;
}

高级样式增强

添加更多视觉效果提升用户体验：

.btn:active {
  transform: scale(0.95);
}

.calculator {
  font-family: 'Segoe UI', sans-serif;
}

.display {
  border-bottom: 1px solid #444;
  box-sizing: border-box;
}

.buttons {
  border-top: 1px solid #999;
}

响应式调整

确保计算器在不同设备上显示良好：

@media (max-width: 400px) {
  .calculator {
    width: 90%;
  }

  .btn {
    height: 60px;
    font-size: 1.2em;
  }
}

深色模式支持

添加深色模式样式：

@media (prefers-color-scheme: dark) {
  .calculator {
    background-color: #222;
    border-color: #444;
  }

  .display {
    background-color: #111;
  }

  .btn {
    background-color: #333;
    color: white;
  }

  .btn:hover {
    background-color: #444;
  }
}

这些CSS代码可以创建一个美观且功能完整的计算器界面外观。实际使用时，需要配合JavaScript来实现计算功能。界面设计可以根据需要进一步调整颜色、尺寸和动画效果。

css制作计算器界面