計算器一直是程序員們最鐘愛的項目之一。今天我們將使用CSS來制作一個計算器網頁。這個計算器將包括數字鍵、運算符、小數點、等號和清除鍵等基本功能。

html {
font-size: 16px;
}
body {
background-color: #f4f4f4;
font-family: 'Open Sans', Arial, sans-serif;
margin: 0;
padding: 0;
}
.calculator {
width: 300px;
margin: 20px auto;
padding: 10px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.2);
}
.display {
height: 50px;
padding: 10px;
font-size: 24px;
text-align: right;
background-color: #f4f4f4;
border: none;
}
.button {
height: 50px;
width: 50px;
margin: 5px;
font-size: 24px;
background-color: #e6e6e6;
border-radius: 50%;
border: none;
}
.button:hover {
background-color: #d9d9d9;
}
button:active {
box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

我們使用了一些CSS樣式來設置計算器的外觀。我們設置一個類名為“calculator”的div元素，將其居中并添加一些背景顏色和陰影效果，使它看起來更像一個真實的計算器。

我們還定義了"display"類，用于設置顯示屏幕的外觀細節并定義"button"類，用于設置按鈕的外觀。

現在我們需要一些JavaScript代碼來處理計算器的基本功能：

var display = document.querySelector(".display");
var buttons = document.querySelectorAll(".button");
buttons.forEach(function(button) {
button.addEventListener("click", function() {
var input = button.getAttribute("data-value");
if (input === "C") {
display.value = "";
} else if (input === "=") {
display.value = eval(display.value);
} else {
display.value += input;
}
});
});

我們通過使用querySelector和querySelectorAll方法來獲取顯示屏幕和所有按鈕的引用。我們使用forEach循環遍歷所有按鈕，為它們添加一個點擊事件處理程序。

如果用戶點擊了“C”按鈕，我們將清空顯示屏幕的值。如果用戶點擊了“=”按鈕，我們將使用JavaScript eval（）函數來計算用戶在屏幕上輸入的表達式。否則，我們將向顯示屏幕添加用戶輸入的值。

在這里我們創建了一個簡單但是功能完整的計算器網頁。希望這篇文章讓你對使用CSS和JavaScript來制作網頁有一個更好的理解！