CSS做一個(gè)簡單的計(jì)算器

html {
font-size: 16px; /* 設(shè)置全局字體大小 */
}
body {
font-family: Arial, sans-serif; /* 設(shè)置全局字體 */
width: 300px;
margin: 0 auto; /* 居中顯示 */
}
.calc-container {
border: 1px solid #ccc;
padding: 10px;
}
.input {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 5px;
font-size: 1.2rem; /* 設(shè)置輸入框大小 */
text-align: right;
}
.btn {
display: inline-block;
width: 33.3%;
background-color: #eee;
border: none;
padding: 10px;
font-size: 1.2rem;
cursor: pointer;
}
.btn:hover {
background-color: #ddd;
}
.btn#equal {
background-color: #f79726;
color: #fff;
}
.btn#equal:hover {
background-color: #e68a00;
}

HTML結(jié)構(gòu)：

<div class="calc-container">
<input type="text" class="input" disabled>
<button class="btn">AC</button>
<button class="btn">+/-</button>
<button class="btn">%</button>
<button class="btn">/</button>
<button class="btn">7</button>
<button class="btn">8</button>
<button class="btn">9</button>
<button class="btn">*</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">-</button>
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">+</button>
<button class="btn">0</button>
<button class="btn">.</button>
<button id="equal" class="btn">=</button>
</div>

以上代碼可以實(shí)現(xiàn)一個(gè)基本的計(jì)算器，如下圖所示：