<div class="sample">是一種常見的HTML元素，用于在網頁中創建塊級容器。它可以用來組織和布局網頁的內容，并與CSS樣式一起使用，使頁面的外觀更加靈活和美觀。在本文中，我們將詳細介紹div.sample的使用方法，并通過一些代碼案例來說明其功能和效果。</div>

在實際的網頁開發中，我們經常會使用div.sample來將一些相關的內容進行分組，并且為它們應用相同的樣式。例如，如果我們想要在網頁中創建一個包含多個段落的區域，并為這個區域應用特定的樣式，我們可以使用div.sample來實現：

<div class="sample">
<p>這是第一個段落。</p>
<p>這是第二個段落。</p>
<p>這是第三個段落。</p>
</div>

通過給div元素添加class屬性并設置值為"sample"，我們可以將這個div標記為div.sample。然后，在CSS樣式文件中，我們可以通過選擇器".sample"來定義這個div的樣式：

.sample {
background-color: lightblue;
padding: 20px;
}

上面的代碼片段中，我們設置了div.sample的背景顏色為淺藍色，并添加了20像素的內邊距。這樣一來，無論div.sample包含多少個段落，它們都會共享相同的樣式，從而使頁面看起來更加整潔和有序。

除了組織和布局內容之外，div.sample還可以用于創建網頁中的一些特殊效果。比如，我們可以使用div.sample來創建一個包含圖片和文字的卡片效果：

<div class="sample">
<img src="example.jpg" alt="示例圖片">
<h2>這是一個示例標題</h2>
<p>這是一個示例內容。</p>
</div>

在上面的代碼中，我們將一個圖片、一個標題和一段內容放在了div.sample中。然后，我們可以通過CSS樣式為div.sample設置特定的樣式，比如添加邊框、調整內外邊距等等：

.sample {
border: 1px solid gray;
padding: 20px;
margin: 10px;
}

通過上述代碼，我們為div.sample添加了一個灰色的邊框，并設置了20像素的內邊距和10像素的外邊距。這樣一來，div.sample就會呈現出一個類似卡片的外觀，使圖片、標題和內容之間的關聯更加緊密。

來說，div.sample是一個非常有用的HTML元素，它可以用來組織和布局網頁的內容，并通過CSS樣式為其添加特定的樣式和效果。無論是創建簡單的段落區域，還是實現復雜的網頁布局和效果，div.sample都能發揮重要的作用。