ADD file via upload

style.css

@@ -0,0 +1,69 @@
+body, html {
+    margin: 0;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f2f2f2; /* 背景颜色 */
+    font-family: 'Arial', sans-serif;
+}
+
+.calculator {
+    width: 400px; /* 计算器宽度 */
+    border-radius: 30px; /* 圆角 */
+    overflow: hidden; /* 隐藏超出边界部分 */
+    background: #ffffff; /* 背景颜色 */
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 阴影效果 */
+}
+
+.display {
+    background: #000; /* 显示区域颜色 */
+    color: #ffffff; /* 字体颜色 */
+    font-size: 64px; /* 字体大小 */
+    text-align: right; /* 文字右对齐 */
+    padding: 20px; /* 内边距 */
+    border-bottom: 1px solid #dddddd; /* 下边框 */
+    height: 100px; /* 显示区域高度 */
+    box-sizing: border-box; /* 包括内边距和边框 */
+    overflow: hidden; /* 隐藏超出内容 */
+}
+
+.buttons {
+    display: grid; /* 使用网格布局 */
+    grid-template-columns: repeat(4, 1fr); /* 四列 */
+    gap: 1px; /* 按钮间隔 */
+}
+
+.button {
+    height: 80px; /* 按钮高度 */
+    border: none; /* 无边框 */
+    font-size: 36px; /* 字体大小 */
+    color: white; /* 字体颜色 */
+    background: #007AFF; /* 按钮颜色 */
+    transition: background 0.3s; /* 背景颜色渐变 */
+}
+
+.button.zero {
+    grid-column: span 2; /* 0按钮跨两列 */
+}
+
+.button.function {
+    background: #8E8E93; /* 功能按钮颜色 */
+}
+
+.button.operator {
+    background: #FF3B30; /* 运算符按钮颜色 */
+}
+
+.button:hover {
+    cursor: pointer; /* 鼠标样式 */
+    background: #0051D4; /* 鼠标悬停效果 */
+}
+
+.button.operator:hover {
+    background: #7A7A7A; /* 运算符鼠标悬停效果 */
+}
+
+.button.function:hover {
+    background: #7A7A7A; /* 功能按钮鼠标悬停效果 */
+}