<div布局入門
<div布局是一種常用的網頁布局方法，通過使用<div>標簽和CSS樣式，可以靈活地控制網頁的布局和排版。<div>是HTML中的一個容器標簽，可以用來包裹其他HTML元素，然后通過CSS樣式來對這些包裹的元素進行布局和樣式控制。下面將通過幾個實際案例來詳細解釋說明div布局的使用方法。
案例一：水平排列的導航欄
要實現一行水平排列的導航欄，可以使用以下HTML結構和CSS樣式：

<p>HTML結構:</p>
<pre>
<div id="navbar">
<a href="#">首頁</a>
<a href="#">產品</a>
<a href="#">服務</a>
<a href="#">聯系我們</a>
</div>

CSS樣式:

<p>#navbar {
display: flex;
justify-content: space-around;
background-color: #f1f1f1;
padding: 10px;
}</p>
<br>
<p>#navbar a {
text-decoration: none;
color: #333;
}</p>

在上面的代碼中，我們通過<div id="navbar">來包裹導航欄的四個鏈接，然后在CSS樣式中使用display: flex來將這四個鏈接水平排列，并使用justify-content: space-around將它們均勻分布在父容器中。為了美化導航欄，我們還設置了背景顏色和內邊距，并且去除了鏈接的下劃線。
案例二：兩欄式布局
要實現一個左側固定寬度，右側自適應寬度的兩欄式布局，可以使用以下HTML結構和CSS樣式：

HTML結構:

<div class="container">
<div class="sidebar">
<h3>邊欄</h3>
<p>邊欄內容...</p>
</div>
<div class="content">
<h3>主內容區</h3>
<p>主內容區內容...</p>
</div>
</div>

CSS樣式:

<p>.container {
display: flex;
}</p>
<br>
<p>.sidebar {
width: 200px;
background-color: #f1f1f1;
padding: 20px;
}</p>
<br>
<p>.content {
flex-grow: 1;
background-color: #fff;
padding: 20px;
}</p>

在上面的代碼中，我們通過<div class="container">來包裹左側邊欄和右側內容區，然后在CSS樣式中使用display: flex將它們排列在一行。通過設置邊欄的width: 200px，我們可以固定邊欄的寬度，而主內容區使用flex-grow: 1可以讓其自適應父容器的剩余空間。
通過以上兩個案例的詳細解釋，我們可以看到<div>布局是一種非常靈活的網頁布局方法，可以幫助我們實現各種不同的布局效果。通過熟練掌握<div>的使用方法，并結合CSS樣式的控制，我們可以輕松地創建出精美且功能豐富的網頁布局，提升用戶體驗和頁面設計的效果。