代码如下（可以改动精简一些，我不想改了，改一下估计50行就够了）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计算器实现模型</title>
</head>
<style>*{margin: 0; padding: 0;}.zhuti{padding-top: 20px;width: 200px; height: 300px;border-radius: 30px;border: 1px solid rgba(0, 0, 0, 0.6);margin: 0 auto;box-shadow: 0 0 20px 1px black;display: grid;gap:5px;grid-auto-flow: row dense;grid-template-rows: repeat(6,40px);grid-template-columns: repeat(4,40px);justify-content: center;} .zhuti span:first-child{grid-column-start: 1;grid-column-end: 5;grid-row-start:1 ;grid-row-end: 1;border: 1px solid bisque;width: 90%; text-align: center;margin-left: 10px; border-radius: 10px;background-color: #ffe4c4; line-height: 40px; box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
.zhuti span:nth-child(2){border-radius: 30%; background-color: bisque; text-align: center;line-height: 40px; box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
.zhuti span:nth-child(3){border-radius: 30%; background-color: bisque; text-align: center; line-height: 40px;box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
.zhuti span:nth-child(4){border-radius: 30%; background-color: bisque; text-align: center; line-height: 40px; box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
.zhuti span:nth-child(5){border-radius: 30%; background-color: bisque; text-align: center; line-height: 40px; line-height: 40px; box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
.zhuti span:nth-child(6){border-radius: 30%; background-color: bisque; text-align: center; line-height: 40px; box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
.zhuti span:nth-child(7){border-radius: 30%; background-color: bisque; text-align: center; line-height: 40px; box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
.zhuti span:nth-child(8){border-radius: 30%; background-color: bisque; text-align: center; line-height: 40px; box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
.zhuti span:nth-child(9){border-radius: 30%; background-color: bisque; text-align: center; line-height: 40px; box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
.zhuti span:nth-child(10){border-radius: 30%; background-color: bisque; text-align: center;line-height: 40px; box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
.zhuti span:nth-child(11){border-radius: 30%; background-color: bisque; text-align: center; line-height: 40px; box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
.zhuti span:nth-child(12){border-radius: 30%; background-color: bisque; text-align: center;line-height: 40px; box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
.zhuti span:nth-child(13){border-radius: 30%; background-color: bisque; text-align: center; line-height: 40px; box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
.zhuti span:nth-child(14){border-radius: 30%; background-color: bisque; text-align: center;line-height: 40px; box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
.zhuti span:nth-child(15){border-radius: 30%; background-color: bisque; text-align: center; line-height: 40px;box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
.zhuti span:nth-child(17){grid-area: 5/4/7/5;border-radius: 30%; background-color: bisque; text-align: center; line-height: 80px; box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
.zhuti span:nth-child(16){border-radius: 30%; background-color: bisque; text-align: center; line-height: 40px; box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
.zhuti span:nth-child(18){border-radius: 30%; background-color: bisque; text-align: center; line-height: 40px; box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
.zhuti span:nth-child(19){border-radius: 30%; background-color: bisque; text-align: center;line-height: 40px; box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
.zhuti span:nth-child(20){border-radius: 30%; background-color: bisque; text-align: center;line-height: 40px; box-shadow: 2px 1px 5px 1px rgba(0, 0, 0, 0.6); }
</style>
<body><p style="text-align: center; margin: 10px;">我的计算器</p><div class="zhuti"><span>显示屏</span><span>clear</span><span>/</span><span>X</span><span>回退</span><span>7</span><span>8</span><span>9</span><span>-</span><span>4</span><span>5</span><span>6</span><span>+</span><span>1</span><span>2</span><span>3</span><span>=</span><span>%</span><span>0</span><span>.</span></div>
</body>
</html>
