在網頁設計中，出現左右滑動翻頁效果可以為網頁帶來新鮮感。這里介紹如何使用CSS實現左右滑動翻頁效果

代碼如下：
HTML部分：
<div class="page-container">
<div class="page" id="page1">頁面1的內容</div>
<div class="page" id="page2">頁面2的內容</div>
<div class="page" id="page3">頁面3的內容</div>
<div class="page" id="page4">頁面4的內容</div>
</div>
CSS部分：
.page-container {
overflow-x: scroll; /*設置水平滾動條*/
white-space: nowrap; /*使子元素不換行*/
height: 400px;
width: 100%;
}
.page {
display: inline-block;
width: 100%;
height: 400px;
}

以上代碼實現了一個包含四個頁面的滑動翻頁效果。其中，通過設置父容器的“overflow-x: scroll;”，使其出現水平滾動條。接著，通過設定每個頁面的“display: inline-block;”，使其以行內塊元素顯示。最后，通過設置每個頁面的“width: 100%;”和父容器的“white-space: nowrap;”，使其橫向排列，并保證子元素不會換行。