在設計網頁時，計算器的使用非常廣泛。通過CSS，我們可以輕松地設計一個計算器來滿足網頁的需求。下面是一個簡單的CSS計算器設計示例代碼：

/* HTML 代碼 */
<div class="calculator">
<input type="text" class="display" />
<!-- 數字鍵盤 -->
<div class="keys">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>0</button>
<button>.</button>
</div>
<!-- 運算鍵盤 -->
<div class="operators">
<button>+</button>
<button>-</button>
<button>×</button>
<button>÷</button>
<button>=</button>
<button>C</button>
</div>
</div>
/* CSS 代碼 */
.calculator {
width: 200px;
border: 1px solid #ccc;
background-color: #fff;
padding: 10px;
}
.calculator .display {
width: 100%;
height: 50px;
border: 1px solid #ccc;
font-size: 24px;
text-align: right;
margin-bottom: 10px;
padding: 5px;
}
.calculator .keys button {
width: 30%;
height: 50px;
border: 1px solid #ccc;
font-size: 18px;
background-color: #eee;
margin-right: 5%;
margin-bottom: 5%;
float: left;
}
.calculator .operators button {
width: 30%;
height: 50px;
border: 1px solid #ccc;
font-size: 18px;
background-color: #eee;
margin-right: 5%;
margin-bottom: 5%;
float: left;
}
.calculator .operators button:last-child {
margin-right: 0;
}

該示例代碼中，我們首先創建了一個包含數字和運算鍵盤的div容器，并設置了它的樣式。然后，我們定義了文本框的樣式以及數字和運算鍵的樣式。在數字鍵盤和運算鍵盤之間，我們添加了一個文本框作為顯示屏。

最后，我們使用CSS選擇器來指定每個HTML元素的樣式。使用這些CSS樣式，我們可以很容易地在網站中添加一個CSS計算器。