<div> 分層顯示是指將網頁中的不同元素按照層次結構來排列顯示，使得頁面更加有層次感和可讀性。通過使用 <div> 標簽，可以將網頁分為不同的塊狀區域，并對每個區域進行獨立的樣式設置和布局。這樣可以簡化網頁的結構，使得代碼更加清晰和易于維護。
<div> 分層顯示的實現可以通過使用 CSS 的樣式選擇器和屬性來定義 div 元素的樣式。下面將通過幾個簡單的代碼案例來詳細說明這個技術的應用。
，我們可以使用 <div> 標簽將網頁分為兩個區域，例如一個左側導航欄和一個右側內容區。以下是一個示例代碼：

<div id="container">
<div id="sidebar">
<ul>
<li>導航1</li>
<li>導航2</li>
<li>導航3</li>
</ul>
</div>
<div id="content">
<h1>標題</h1>
<p>內容</p>
</div>
</div>

在上面的代碼中，我們使用了兩個 div 元素分別定義了 id 屬性為 "sidebar" 和 "content"，它們分別表示導航欄和內容區。接著通過 CSS 樣式選擇器來設置這兩個區域的樣式，例如設置寬度、背景顏色等。這樣就可以將頁面的不同區域進行獨立的樣式布局。
除了使用 id 屬性來選擇分層顯示的區域，我們還可以使用 class 屬性來選擇一組具有相同樣式的元素。以下是一個示例代碼：

<style>
.box {
width: 200px;
height: 200px;
background-color: #ccc;
margin: 10px;
padding: 20px;
}
</style>
<br>
<div class="box">
<p>內容1</p>
</div>
<br>
<div class="box">
<p>內容2</p>
</div>

在上面的代碼中，我們使用了一個名為 "box" 的 class 來選擇一組具有相同樣式的 div 元素，并對它們進行相同的樣式設置。這樣可以在不重復編寫樣式的情況下，快速設置一組具有相同樣式的元素。
<div> 分層顯示技術還可以用于實現網頁布局的響應式設計。通過設置不同的 CSS 樣式和媒體查詢，可以根據不同設備的屏幕尺寸和方向，自動調整網頁布局。以下是一個示例代碼：

<style>
#container {
display: flex;
flex-wrap: wrap;
}
#sidebar {
width: 200px;
background-color: #ccc;
}
#content {
flex: 1;
background-color: #eee;
}
@media screen and (max-width: 768px) {
#sidebar {
width: 100%;
}
#content {
flex: none;
width: 100%;
}
}
</style>
<br>
<div id="container">
<div id="sidebar">
<ul>
<li>導航1</li>
<li>導航2</li>
<li>導航3</li>
</ul>
</div>
<div id="content">
<h1>標題</h1>
<p>內容</p>
</div>
</div>

在上面的代碼中，我們使用了 display: flex 和 flex-wrap: wrap 這兩個 CSS 屬性來創建一個彈性布局容器，并將其中的子元素自動換行。這樣可以在較小的屏幕上自動調整布局，使得導航欄和內容區都占滿整個屏幕。
綜上所述，通過使用 <div> 分層顯示技術，可以更加方便地對網頁進行樣式設置和布局，并實現網頁的分層顯示。無論是簡單的分區布局還是響應式設計，都可以通過這個技術來實現。希望通過上述例子的說明，讀者對于這個技術有更加深入的理解。