網頁翻頁是現代網站頁面設計中常見的功能之一。通過CSS可以非常簡單地實現網頁翻頁的效果。

.pagination {
display: flex;
justify-content: center;
align-items: center;
}
.pagination button {
width: 50px;
height: 50px;
font-size: 20px;
border: 1px solid #333;
background-color: #f2f2f2;
cursor: pointer;
margin: 0 10px;
}
.pagination .active {
background-color: #333;
color: #fff;
}

在上面的CSS代碼中，我們創建了一個pagination類，用于設置網頁翻頁的樣式。我們使用flexbox布局讓按鈕在水平方向上居中，并垂直居中內容。我們設置每個按鈕的寬度為50px、高度為50px、字體大小為20px。我們將按鈕邊框設置為1px的實線，背景色設置為淡灰色。我們還設置了按鈕的光標為指針，以便鼠標懸停時用戶可以更好地理解該按鈕的功能。我們為按鈕之間留出了10px的間隔。

我們用.active類來定義當前處于激活狀態的按鈕樣式。當用戶單擊頁碼時，我們可以將該頁碼的按鈕設置為.active類。在這個例子中，我們將激活狀態的按鈕背景色設置為黑色，并將文字顏色設置為白色。

通過以上CSS代碼，我們可以很輕松地實現網頁翻頁的效果。只需要在網頁中使用pagination類并加入我們所需要的按鈕即可。