CSS中，我們可以通過一些技巧來實現頁面的分頁效果。其中一種比較常見的方式是，把左側設置為分頁欄，而右側則是我們想要展示的內容，兩者之間有個分隔線，看起來非常科技感。

/* 設置樣式 */
.paging {
width: 100%;
height: 100%;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.left {
width: 200px;
height: 100%;
background-color: #f5f5f5;
border-right: 1px solid #ddd;
padding: 20px;
}
.right {
width: calc(100% - 220px);
height: 100%;
padding: 20px;
}
@media screen and (max-width: 800px) {
.paging {
flex-direction: column;
}
.left {
width: 100%;
border-right: none;
margin-bottom: 20px;
}
.right {
width: 100%;
}
}

代碼中，我們為分頁欄和右側內容分別設置了樣式。分頁欄的樣式為灰色背景和1像素灰色邊框，右側內容設置了一個白色背景作為對比。另外，這里的關鍵在于通過Flex布局，使得兩者分別占據了頁面的左側和右側。并且，在媒體查詢中，我們還為小屏幕設備設置了響應式布局，讓它們堆疊起來，更加美觀。