<div>是HTML中常用的一個標簽，用于創建一個可以包含其他HTML元素的容器。在網頁開發中，我們經常會使用<div>來劃分頁面的不同區域。下面我們將通過幾個代碼案例詳細解釋如何在<div>中放置頁面內容。
案例一：基本用法 當我們在<div>中不放置任何元素時，<div>本身并不會產生任何可見效果，但它可以作為一個容器，用于包裹其他內容。例如，我們可以使用<div>來創建一個居中顯示的頁面。
案例二：嵌套用法 <div>可以嵌套使用，我們可以在一個<div>中放置另一個<div>，從而創建更復雜的頁面布局。下面是一個簡單的示例，演示了如何使用嵌套的<div>來創建一個兩列布局。
案例三：多個<div>的應用 在實際開發中，我們常常需要使用多個<div>來創建復雜的頁面布局。下面是一個真實的案例，演示了如何使用多個<div>來構建一個包含標題、導航欄和內容區域的頁面。
綜上所述，<div>標簽在網頁開發中起到了重要的作用。通過嵌套、樣式設置和多個<div>的應用，我們可以靈活地構建各種各樣的頁面布局。希望通過上述案例的介紹，您能更好地理解并應用<div>中放置頁面的相關知識。
案例一：基本用法 當我們在<div>中不放置任何元素時，<div>本身并不會產生任何可見效果，但它可以作為一個容器，用于包裹其他內容。例如，我們可以使用<div>來創建一個居中顯示的頁面。
下面是一個基本的HTML頁面結構：
<!DOCTYPE html>
<html>
<head>
<title>基本用法</title>
<style>
.container {
text-align: center;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<h1>這是一個居中顯示的標題</h1>
<p>這是一個居中顯示的段落。</p>
</div>
</body>
</html>在上面的代碼中，我們使用了一個<div>來創建一個名為"container"的容器，并將其中的標題和段落都居中顯示。通過使用<style>標簽中的CSS樣式，我們為.container類設置了text-align屬性為center，從而實現居中顯示的效果。同時，我們還為.container類設置了margin-top屬性為50px，用于設置與頁面頂部的距離。
案例二：嵌套用法 <div>可以嵌套使用，我們可以在一個<div>中放置另一個<div>，從而創建更復雜的頁面布局。下面是一個簡單的示例，演示了如何使用嵌套的<div>來創建一個兩列布局。
以下是具有兩列布局的HTML代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>嵌套用法</title>
<style>
.container {
display: flex;
justify-content: space-between;
}
<br>
.column {
width: 45%;
background-color: gray;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="column">
<h2>左側欄目</h2>
<p>這是左側欄目的內容。</p>
</div>
<div class="column">
<h2>右側欄目</h2>
<p>這是右側欄目的內容。</p>
</div>
</div>
</body>
</html>在上面的代碼中，我們使用了兩個嵌套的<div>來創建一個兩列布局。，我們為.container類設置了display屬性為flex和justify-content屬性為space-between。這樣，容器中的兩個列就會平均分配，并且之間會有一定的間距。，我們為.column類設置了寬度、背景顏色以及內邊距。這樣，每個列就會具有相應的樣式效果。
案例三：多個<div>的應用 在實際開發中，我們常常需要使用多個<div>來創建復雜的頁面布局。下面是一個真實的案例，演示了如何使用多個<div>來構建一個包含標題、導航欄和內容區域的頁面。
以下是具有標題、導航欄和內容區域的頁面布局示例：
<!DOCTYPE html>
<html>
<head>
<title>多個<div>的應用</title>
<style>
.header {
background-color: lightblue;
padding: 20px;
box-sizing: border-box;
}
.nav {
background-color: lightgray;
padding: 10px;
box-sizing: border-box;
}
.content {
background-color: white;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="header">
<h1>這是一個標題</h1>
</div>
<div class="nav">
<ul>
<li>導航項一</li>
<li>導航項二</li>
<li>導航項三</li>
</ul>
</div>
<div class="content">
<h2>內容區域</h2>
<p>這是內容區域的內容。</p>
</div>
</body>
</html>在上面的代碼中，我們使用了三個<div>來創建頁面的標題、導航欄和內容區域。為了區分它們，我們分別為它們設置了不同的類名，并為每個類名設置了相應的CSS樣式。通過設置背景顏色、內邊距和盒模型，我們可以為每個<div>添加特定的樣式效果。
綜上所述，<div>標簽在網頁開發中起到了重要的作用。通過嵌套、樣式設置和多個<div>的應用，我們可以靈活地構建各種各樣的頁面布局。希望通過上述案例的介紹，您能更好地理解并應用<div>中放置頁面的相關知識。