引言
相当简单的一个css样式，预览图如下
代码相对比较简单，这里只涉及到简单的几个知识点：
- Flex布局处理
- 背景颜色处理
- 字体大小、粗细、字体
- 内外边距的设置
- 圆角边框的设置
- box-sizing处理
代码
常规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部分代码
* {
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);
}相对来说比较简单，也是新手入门的练习
