<div>是Hypertext Markup Language (HTML) 中的一個(gè)標(biāo)簽，用于定義文檔中的一個(gè)區(qū)域（division/section）或者表示文檔中的一個(gè)獨(dú)立部分。它常用于布局網(wǎng)頁，并控制元素在頁面中的位置和樣式。在這篇文章中，我們將重點(diǎn)介紹<div>標(biāo)簽的豎版布局，并通過幾個(gè)代碼案例來詳細(xì)說明其用法。
第一個(gè)例子是一個(gè)基本的豎版布局，分為上中下三個(gè)區(qū)域。代碼如下所示：

HTML代碼：

<div class="container">
<div class="header">
<h1>這是頭部</h1>
</div>
<div class="content">
<p>這是內(nèi)容區(qū)域</p>
</div>
<div class="footer">
<p>這是底部</p>
</div>
</div>

CSS代碼：

.container {
display: flex;
flex-direction: column;
height: 100vh;
}
<br>
.header {
background-color: #f1f1f1;
padding: 20px;
}
<br>
.content {
flex-grow: 1;
padding: 20px;
}
<br>
.footer {
background-color: #f1f1f1;
padding: 20px;
}

在這個(gè)例子中，我們使用了 CSS 中的 flexbox 屬性來創(chuàng)建了一個(gè)豎版布局。，我們給包裹三個(gè)區(qū)域的<div>標(biāo)簽設(shè)置了一個(gè).container 的 class。通過設(shè)置 display: flex，我們將.container 定義為一個(gè) flex 容器。然后，我們使用 flex-direction: column 將容器的方向設(shè)置為垂直方向。
對于上中下三個(gè)區(qū)域，我們分別給它們定義了不同的 class（.header、.content、.footer）。通過設(shè)置 .header 和 .footer 的背景顏色，我們可以清楚地區(qū)分出這兩個(gè)區(qū)域。在 .content 中，我們使用了 flex-grow 屬性來讓其占據(jù)剩余的空間，使頁面內(nèi)容居中。
第二個(gè)例子是一個(gè)帶有側(cè)邊欄的豎版布局，代碼如下所示：

HTML代碼：

<div class="container">
<div class="sidebar">
<ul>
<li>導(dǎo)航1</li>
<li>導(dǎo)航2</li>
<li>導(dǎo)航3</li>
</ul>
</div>
<div class="content">
<p>這是內(nèi)容區(qū)域</p>
</div>
</div>

CSS代碼：

.container {
display: flex;
height: 100vh;
}
<br>
.sidebar {
flex-basis: 20%;
background-color: #f1f1f1;
padding: 20px;
}
<br>
.content {
flex-grow: 1;
padding: 20px;
}

在這個(gè)例子中，我們使用了側(cè)邊欄來擴(kuò)展我們的豎版布局。通過將.sidebar 的 flex-basis 屬性設(shè)置為 20%，我們將側(cè)邊欄的寬度設(shè)置為整個(gè)布局的 20%。這意味著.content 將占據(jù)剩余的 80% 的寬度，并且隨著窗口的調(diào)整而自動(dòng)調(diào)整大小。
這些代碼案例展示了如何使用<div>標(biāo)簽和 CSS 布局屬性來實(shí)現(xiàn)豎版布局。通過合理設(shè)置<div>的 class 和相關(guān)屬性，我們可以輕松創(chuàng)建具有不同設(shè)計(jì)和結(jié)構(gòu)的豎版布局。這使得我們能夠在網(wǎng)頁設(shè)計(jì)中更自由地控制元素的位置和樣式，提供更好的用戶體驗(yàn)。通過學(xué)習(xí)和實(shí)踐這些技術(shù)，我們能夠更好地掌握<div>標(biāo)簽的豎版布局。