H5+CSS实现一个简单计算器样式（新手入门）

## 引言

相当简单的一个`css`样式，预览图如下

![计算器效果](https://static.hw13.cn/usr/uploads/2024/11/371151421.png)

代码相对比较简单，这里只涉及到简单的几个知识点：

+ Flex布局处理
+ 背景颜色处理
+ 字体大小、粗细、字体
+ 内外边距的设置
+ 圆角边框的设置
+ box-sizing处理

## 代码

常规`HTMl`代码

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>计算器</title>
	<link rel="stylesheet" type="text/css" href="css/calc.css">
</head>
<body>
	
	<div class="bigBox">
		<div class="showResult"></div>

<div class="btns">
			<div>
				<button class="btn">7</button>
				<button class="btn">8</button>
				<button class="btn">9</button>
				<button class="btn yellow">+</button>
			</div>
			<div>
				<button class="btn">4</button>
				<button class="btn">5</button>
				<button class="btn">6</button>
				<button class="btn yellow">-</button>
			</div>
			<div>
				<button class="btn">1</button>
				<button class="btn">2</button>
				<button class="btn">3</button>
				<button class="btn yellow">x</button>
			</div>
			<div>
				<button class="btn">0</button>
				<button class="btn">.</button>
				<button class="btn blue">=</button>
				<button class="btn yellow">/</button>
			</div>
			<div>
				<button class="btn twoBox">清除</button>
				<button class="btn twoBox">退格</button>
			</div>
		</div>

<hr class="hr" />
	</div>
</body>
</html>
```

然后是css部分代码

```css
* {
	padding: 0;
	margin: 0;
}

body {
	background-color: #ECECEC;

height: 100vh;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

.bigBox {
	width: 450px;
	height: 520px;
	border-radius: 10px;
	background-color: #FFFFFF;

padding: 30px;
	box-sizing: border-box;
}

.showResult {
	width: 100%;
	height: 70px;
	background-color: #F8F8F8;
}

.btns div {
	display: flex;
	justify-content: space-between;
	margin: 10px 0;
}

.btns .btn {
	width: 80px;
	height: 60px;
	background-color: #F0F0F0;
	border: none;
	border-radius: 5px;
	font-size: 23px;
}

.btn.twoBox {
	width: 185px;
	background-color: #E74C3C;
	color: #fff;
}

.btn.blue {
	background-color: #3498DB;
	color: #fff;
}

.btn.yellow {
	background-color: #F1C40F;
	color: #fff;
}

.hr {
	margin-top: 20px;
	border-color: rgba(160, 160, 160, 0.2);
}
```

相对来说比较简单，也是新手入门的练习

欢迎关注拓行公众号，分享各种技术博客文章

拓行——奋勇进取，开拓未来，砥砺前行

最后修改：2024 年 11 月 05 日

如果您对各种技术博客文章感兴趣，欢迎关注拓行公众号，分享各种专业技术知识~

H5+CSS实现一个简单计算器样式（新手入门）

黄炜 • 2024 年 11 月 05 日

H5+CSS实现一个简单计算器样式（新手入门）

typecho后台文章撰写的自定义字段默认收起

手把手教你在Linux下源码编译安装phpv8.3.0最新版

手把手教你在Linux下源码搭建MySQL关系型数据库v8.2.0最新社区版

Linux如何上传、下载传输文件或目录

手把手教你源码搭建Nginx服务器v1.25.3最新版（非root启动）

【五天游】湖南自驾游行程规划-第一版

【五天游】山东自驾游行程规划-第三版

JS操作DOM的小练习之表格获取设置值

【五天游】江浙自驾游行程规划-第一版

SublimeText脚本实现打开文件自动折叠代码块

H5+CSS实现一个简单计算器样式（新手入门）