div 青苔燈

div 青苔燈是一種在網頁設計中常用的布局元素，通過div標簽可以將頁面劃分為不同的區塊，方便進行樣式和腳本的控制。本文將通過幾個代碼案例，詳細解釋說明如何使用div標簽實現不同的布局效果。

案例一：垂直居中

<div style="display: flex; align-items: center; justify-content: center; height: 200px; background-color: lightblue;">
<p>這是一個居中的文本</p>
</div>

上述代碼中，我們通過設置div的display屬性為flex，然后使用align-items和justify-content屬性將文本水平和垂直居中。同時我們設置div的高度和背景顏色，以便更好地展示效果。

案例二：多列布局

<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px;">
<div style="background-color: lightblue;">列一</div>
<div style="background-color: lightgreen;">列二</div>
<div style="background-color: lightpink;">列三</div>
</div>

上述代碼中，我們通過設置div的display屬性為grid，然后使用grid-template-columns屬性將內容分為三列。同時我們使用grid-gap屬性設置列與列之間的間距。通過在每個子div中設置不同的背景顏色，以便更好地展示效果。

案例三：導航欄

<div style="background-color: lightblue;">
<ul style="display: flex; list-style: none; padding: 0; margin: 0;">
<li style="margin-right: 10px;">首頁</li>
<li style="margin-right: 10px;">產品</li>
<li style="margin-right: 10px;">關于我們</li>
<li>聯系我們</li>
</ul>
</div>

上述代碼中，我們通過設置ul的display屬性為flex，然后使用list-style、padding和margin屬性去除了列表默認的樣式，并設置了一些間距。通過在每個li中設置margin-right屬性，實現列表項之間的間距效果。通過在div中設置背景顏色，以便更好地展示效果。

：

div 青苔燈是一個非常有用的布局元素，在網頁設計中可以靈活地進行排列和樣式的控制。通過使用不同的CSS屬性，我們可以實現垂直居中、多列布局和導航欄等各種布局效果。希望本文的例子能夠幫助讀者更好地理解和應用div標簽。