代码如下（可以改动精简一些，我不想改了，改一下估计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>