<div>翻頁顯示是一種常見的網頁設計技術，它允許用戶通過在頁面中瀏覽內容時，通過一個或多個指示器來切換到不同的頁面或部分。這種技術通常用于顯示大量的數據，以及在有限的屏幕空間上顯示長列表的情況下。使用<div>元素和一些簡單的CSS和JavaScript代碼，我們可以輕松創建出翻頁顯示的效果。
例如，我們可以創建一個簡單的div翻頁顯示效果，該效果將在HTML頁面上顯示一個列表，并在每個頁面上顯示固定數量的項目。以下是一個示例代碼：

html
<div id="page1" class="page">
<p>項目1</p>
<p>項目2</p>
<p>項目3</p>
</div>
<br>
<div id="page2" class="page">
<p>項目4</p>
<p>項目5</p>
<p>項目6</p>
</div>
<br>
<button id="prevButton">上一頁</button>
<button id="nextButton">下一頁</button>

上面的代碼中，我們使用兩個<div>元素來表示兩個不同的頁面，每個頁面包含一些項目。我們還添加了兩個<button>元素，用于切換到上一頁和下一頁。
接下來，我們可以使用CSS來設置每個頁面的樣式，以及初始顯示的頁面。以下是一個示例代碼：

css
.page {
display: none;
}
<br>
#page1 {
display: block;
}

上面的代碼中，我們使用CSS選擇器設置了所有頁面的樣式為display: none;，這意味著它們在初始加載頁面時將不可見。然后，我們使用display: block;來將第一個頁面設置為可見。
最后，我們可以使用JavaScript代碼來實現翻頁功能，以及切換頁面時的顯示和隱藏。以下是一個示例代碼：

javascript
var currentPage = 1;
var totalPages = document.getElementsByClassName('page').length;
<br>
document.getElementById('prevButton').onclick = function() {
if (currentPage > 1) {
document.getElementById('page' + currentPage).style.display = 'none';
currentPage--;
document.getElementById('page' + currentPage).style.display = 'block';
}
};
<br>
document.getElementById('nextButton').onclick = function() {
if (currentPage < totalPages) {
document.getElementById('page' + currentPage).style.display = 'none';
currentPage++;
document.getElementById('page' + currentPage).style.display = 'block';
}
};

上面的代碼中，我們定義了兩個變量：currentPage表示當前顯示的頁面，totalPages表示總頁面數。然后，我們使用按鈕的點擊事件來監聽上一頁和下一頁的點擊事件。當點擊上一頁按鈕時，如果當前頁面大于1，則將當前頁面隱藏，當前頁面數減1，并將上一個頁面顯示出來。當點擊下一頁按鈕時，如果當前頁面小于總頁面數，則將當前頁面隱藏，當前頁面數加1，并將下一個頁面顯示出來。
使用上述的HTML、CSS和JavaScript代碼，我們就可以輕松地創建出一個簡單的<div>翻頁顯示效果。通過修改頁面的內容和樣式，我們還可以進一步定制和優化這個效果，以實現更復雜的翻頁顯示需求。