下面是一个简单的计算器示例，其中包含了输入框、按钮、计算按钮和结果框：
“`html
<!DOCTYPE html>
<html>
<head>
<title>CSS 计算器</title>
<style>
input[type=”button”] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
input[type=”text”] {
background-color: #F2F2F2;
color: white;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
input[type=”number”] {
background-color: #E6E6E6;
color: white;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
</style>
</head>
<body>
<h2>CSS 计算器</h2>
<form>
<input type=”text” name=”input1″ placeholder=”请输入第一个数字”>
<input type=”text” name=”input2″ placeholder=”请输入第二个数字”>
<input type=”button” name=”button1″ value=”加”>
<input type=”button” name=”button2″ value=”减”>
<input type=”text” name=”result” placeholder=”请输入结果”>
</form>
</body>
</html>
在这个计算器中，大家使用了 HTML 中的 input[type=”button”] 和 input[type=”text”] 元素来创建按钮和文本输入框。大家还使用了 CSS 样式来调整元素的颜色、边框和阴影等属性，使其看起来更加美观。
大家可以在浏览器中打开这个计算器，并使用鼠标拖动输入框和计算按钮来创建更多的计算选项。同时，大家还可以使用 CSS 的动画效果来使计算器更加易于使用。
使用 CSS 制作计算器可以帮助大家创建美观、易于使用的图形化计算器，而无需编写大量的 JavaScript 代码。