用html和css做一个简易的计算器

好的，以下是一个简单的计算器的 HTML 和 CSS 代码示例：

HTML代码：

<div class="calculator">
  <input type="text" id="result" readonly>
  <button id="clear" onclick="clearResult()">C</button>
  <button onclick="appendToResult('7')">7</button>
  <button onclick="appendToResult('8')">8</button>
  <button onclick="appendToResult('9')">9</button>
  <button onclick="appendToResult('/')">/</button>
  <button onclick="appendToResult('4')">4</button>
  <button onclick="appendToResult('5')">5</button>
  <button onclick="appendToResult('6')">6</button>
  <button onclick="appendToResult('*')">*</button>
  <button onclick="appendToResult('1')">1</button>
  <button onclick="appendToResult('2')">2</button>
  <button onclick="appendToResult('3')">3</button>
  <button onclick="appendToResult('-')">-</button>
  <button onclick="appendToResult('0')">0</button>
  <button onclick="appendToResult('.')">.</button>
  <button onclick="calculate()">=</button>
  <button onclick="appendToResult('+')">+</button>
</div>

CSS代码：

.calculator {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  margin: 20px auto;
  width: 200px;
  text-align: center;
}

.calculator button {
  font-size: 20px;
  background-color: #eee;
  border: none;
  cursor: pointer;
  padding: 10px;
}

.calculator button:hover {
  background-color: #ddd;
}

#result {
  font-size: 20px;
  padding: 10px;
  border: none;
  text-align: right;
}

该计算器使用了 HTML 的 `<button>` 和 `<input>` 元素，以及 CSS 的网格布局和样式来实现。JavaScript 代码需要根据 HTML 元素的 id 属性来实现计算器的基本功能，包括清除、输入数字和操作符、计算结果等。由于 JavaScript 代码不属于本次问题的范畴，这里就不提供代码示例了。