<div active設置是一種CSS屬性，用于為HTML元素添加交互效果。當某個元素被點擊或滑過時，它可以改變元素的樣式，從而給用戶一種視覺反饋。通過設置div active屬性，我們可以為網頁增加更多動態和互動性。

下面是幾個代碼案例，詳細解釋了如何使用div active設置來實現不同的效果：

案例1：

<div>

<code>
<div style="width: 200px; height: 200px; background-color: #ff0000;"></div>
</code>

</div>

在這個案例中，我們創建了一個紅色的div元素。當用戶點擊這個div元素時，我們可以為其設置新的背景顏色，以表示用戶點擊了它。通過使用div active設置，我們可以將這個效果實現如下：

<div>

<code>
div:active {
background-color: #00ff00;
}
</code>

</div>

這段CSS代碼表示當div元素處于active狀態（即用戶點擊時），背景顏色將變為綠色。這樣一來，用戶在點擊div元素時，就能夠看到背景顏色的變化，從而得到一種視覺反饋。

案例2：

<div>

<code>
<div style="width: 200px; height: 200px; background-color: #ff0000;"></div>
</code>

</div>

在這個案例中，我們再次創建了一個紅色的div元素。當用戶在這個div元素上滑過時，我們可以為其設置新的背景顏色，以表示用戶正在交互。通過使用div active設置，我們可以將這個效果實現如下：

<div>

<code>
div:hover {
background-color: #00ff00;
}
</code>

</div>

這段CSS代碼表示當div元素處于hover狀態（即用戶滑過時），背景顏色將變為綠色。這樣一來，用戶在滑過div元素時，就能夠看到背景顏色的變化，從而得到一種視覺反饋。

案例3：

<div>

<code>
<div style="width: 200px; height: 200px;"></div>
</code>

</div>

在這個案例中，我們創建了一個沒有背景顏色的div元素。當用戶點擊這個div元素時，我們可以為其添加一個陰影效果，以突出顯示元素的點擊狀態。通過使用div active設置，我們可以將這個效果實現如下：

<div>

<code>
div:active {
box-shadow: 0px 0px 5px #000000;
}
</code>

</div>

這段CSS代碼表示當div元素處于active狀態（即用戶點擊時），為其添加一個黑色的陰影效果。這樣一來，用戶在點擊div元素時，就能夠看到陰影的出現，從而得到一種視覺反饋。

通過以上幾個案例，我們可以看到使用div active設置可以為HTML元素增加交互效果，提升網頁的互動性和用戶體驗。我們可以根據實際需求，靈活運用div active設置來實現不同的效果。