<div class="p1">在HTML中，我們經常會使用div元素來劃分頁面的不同區域。div元素是一個容器，可以用來包裹其他HTML元素，并為它們提供樣式和布局。在CSS中，我們可以為div元素定義不同的類（class），以便在樣式表中進行選擇和定制。在本文中，我們將討論兩個常見的div類別，即div.1和div.2，并通過幾個代碼案例詳細解釋和展示它們的用法。</div>
<div class="p2">，讓我們來了解div.1。div.1是一個通用的div類別，常用于包裹一組相關的HTML元素，并為它們提供樣式和布局。以下是一個示例代碼，展示了如何使用div.1來創建一個簡單的導航欄：</div>

<div class="div1">
<p class="nav">Home</p>
<p class="nav">About</p>
<p class="nav">Services</p>
<p class="nav">Contact</p>
</div>

<div class="p3">在以上代碼中，我們創建了一個div元素，并為其添加了div.1類別。在該div元素內部，我們使用了四個p元素來表示導航欄的不同選項。通過為這些p元素添加nav類別，我們可以在樣式表中選擇它們，并為它們提供相應的樣式。例如，我們可以使用如下的CSS代碼來定義導航欄選項的樣式：</div>

.nav {
background-color: #333;
color: #FFF;
padding: 10px;
margin: 5px;
display: inline-block;
}

<div class="p4">在以上代碼中，我們為具有nav類別的p元素設置了背景顏色、字體顏色、內邊距、外邊距和顯示屬性。當我們在瀏覽器中渲染以上HTML代碼時，導航欄選項將以帶有黑色背景和白色字體的矩形塊的形式展示出來。</div>
<div class="p5">接下來，讓我們來了解div.2。div.2是另一個常見的div類別，常用于創建網頁的主要內容區域。以下是一個示例代碼，展示了如何使用div.2來創建一個包含標題和內容的網頁布局：</div>

<div class="div2">
<h1>Article Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie sapien sit amet mi maximus, vel facilisis ligula feugiat. Nulla facilisi. Sed ac dictum tortor. Donec sed purus rhoncus, finibus nulla id, fringilla justo. Phasellus tincidunt odio nec quam cursus, id vulputate tellus interdum. Ut dictum scelerisque malesuada.</p>
</div>

<div class="p6">在以上代碼中，我們創建了一個div元素，并為其添加了div.2類別。在該div元素內部，我們使用了一個h1元素來表示文章的標題，以及一個p元素來表示文章的內容。通過為這些元素添加合適的HTML標簽和類別，我們可以在樣式表中對它們進行選擇和定制。</div>
<div class="p7">需要注意的是，本文僅僅是簡單介紹了div.1和div.2的用法和示例。在實際應用中，div元素和類別的用途非常廣泛，可以根據具體需求進行靈活的定義和使用。通過合理運用div元素和類別，我們可以更好地組織和布局我們的網頁內容，使之更具可讀性和可維護性。</div>