<div> 引用 class 是一種在 HTML 中創建樣式的方法。在 HTML 中，<div> 元素用于創建一個可容納其他 HTML 元素的容器。通過使用 <div> 引用 class，可以給這個容器指定一個 class，然后通過 CSS 樣式來定義這個 class 的外觀和行為。這樣可以方便地對一組元素應用相同的樣式，提高代碼的可維護性和靈活性。
下面我們來看幾個代碼案例來詳細說明使用 <div> 引用 class 的方法和效果。

代碼案例一：

<style>
.my-class {
color: red;
font-size: 16px;
text-align: center;
}
</style>
<br>
<div class="my-class">
這是一個使用了 my-class 樣式的 div
</div>

在上面的代碼中，我們定義了一個名為 my-class 的樣式，這個樣式將 div 中的文本顏色設置為紅色，字體大小設置為 16 像素，文本居中顯示。然后在 div 中指定了 class 為 my-class，從而應用了這個樣式。在瀏覽器中打開這段代碼，你將會看到 div 中的文本變為紅色、字體變大并且居中顯示。

代碼案例二：

<style>
.my-class {
background-color: yellow;
border: 1px solid black;
padding: 10px;
}
</style>
<br>
<div class="my-class">
<p>這是一個使用了 my-class 樣式的 div</p>
<p>這是 div 中的第二個段落</p>
</div>

上面的代碼中，我們定義了一個名為 my-class 的樣式，這個樣式設置了 div 的背景顏色為黃色，邊框為 1 像素的黑色實線，內邊距為 10 像素。同樣地，在 div 中應用了這個樣式，并添加了兩個段落。運行代碼后你會看到，div 的背景變為黃色并且帶有黑色的邊框，段落之間有 10 像素的內邊距。

代碼案例三：

<style>
.my-class {
display: flex;
justify-content: center;
align-items: center;
}
</style>
<br>
<div class="my-class">
<img src="example.jpg" alt="示例圖片">
<p>這是一個居中顯示的 div</p>
</div>

在這個例子中，我們利用 <div> 引用的 class 來居中顯示其中的內容。我們應用了 flex 布局，并通過 justify-content 和 align-items 屬性將其中的元素在水平和垂直方向上都居中顯示。在運行代碼后，你會看到圖片和段落都在 div 內居中顯示。
以上就是幾個使用 <div> 引用 class 的代碼案例，通過這種方法，我們可以輕松地為 HTML 元素設置樣式，并且可以在整個頁面中復用這些樣式。這樣一來，我們就能更好地組織和管理頁面的樣式，提高代碼的可讀性和維護性。