CSS實(shí)現(xiàn)簡(jiǎn)易計(jì)算器

在CSS中，我們可以使用偽元素和calc()函數(shù)來(lái)實(shí)現(xiàn)簡(jiǎn)易計(jì)算器的效果。

/* 定義按鈕樣式 */
button {
width: 50px;
height: 50px;
font-size: 20px;
}
/* 定義計(jì)算器顯示屏樣式 */
.screen {
width: calc(50px * 4 + 10px * 3);
height: 100px;
background: #eee;
font-size: 40px;
text-align: right;
padding-right: 10px;
box-sizing: border-box;
}
/* 定義按鈕的偽元素樣式 */
button::before {
content: attr(value);
}
/* 定義數(shù)字按鈕樣式 */
.number {
background: #fff;
}
/* 定義運(yùn)算符按鈕樣式 */
.operator {
background: #f90;
}
/* 定義等號(hào)按鈕樣式 */
.equal {
background: #9f0;
}
/* 定義清空按鈕樣式 */
.clear {
background: #f00;
}
/* 定義按鈕之間的間距 */
button:not(:nth-child(4n)) {
margin-right: 10px;
}

代碼解釋?zhuān)?/p>

1. 定義按鈕樣式：設(shè)置按鈕的大小和字體大小。
2. 定義計(jì)算器顯示屏樣式：設(shè)置計(jì)算器顯示屏的大小、背景色、字體大小、對(duì)齊方式和內(nèi)邊距。
3. 定義按鈕的偽元素樣式：使用attr()函數(shù)獲取按鈕的"value"屬性值。
4. 定義數(shù)字按鈕樣式和運(yùn)算符按鈕樣式：設(shè)置數(shù)字按鈕和運(yùn)算符按鈕的背景色。
5. 定義等號(hào)按鈕樣式：設(shè)置等號(hào)按鈕的背景色。
6. 定義清空按鈕樣式：設(shè)置清空按鈕的背景色。
7. 定義按鈕之間的間距：使用:not()偽類(lèi)選擇器和:nth-child()偽類(lèi)選擇器設(shè)置按鈕之間的間距。

利用上述代碼，我們就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的CSS計(jì)算器。