在網(wǎng)頁設(shè)計(jì)中，出現(xiàn)左右滑動翻頁效果可以為網(wǎng)頁帶來新鮮感。這里介紹如何使用CSS實(shí)現(xiàn)左右滑動翻頁效果

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

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