<span style="font-size:18px;">案例1：使用<div>元素進行網頁布局</span>
我們來看一個使用<div>元素進行網頁布局的示例。假設我們要創建一個簡單的網頁，其中包含一個導航欄和一個內容區域。我們可以使用<div>元素來定義導航欄和內容區域的布局。
<code><div class="navbar"> <ul> <li>首頁</li> <li>新聞</li> <li>產品</li> <li>聯系我們</li> </ul> </div> <br> <div class="content"> <h1>歡迎來到我們的網站！</h1> <p>這是我們的內容區域。</p> </div></code>
在上面的代碼中，我們使用了兩個<div>元素，分別為導航欄和內容區域定義了樣式類名。通過為這兩個元素添加樣式，我們可以對它們進行布局和樣式設計。
案例2：使用<span>元素進行文本樣式設計
除了用于布局，<span>元素也常用于進行文本樣式設計。假設我們要將一段文本中的某個詞或短語設置為特殊樣式，比如加粗或著重顯示。我們可以使用<span>元素來包裹這個詞或短語，并為<span>元素添加相應的樣式。
<code><p>這是一段示例文本，其中包含一個特殊詞匯<span class="highlight">highlight</span>。</p></code>
在上面的代碼中，我們使用了<span>元素，并為它添加了樣式類名"highlight"。通過為這個樣式類添加CSS樣式，我們可以使<span>元素中的文本擁有特殊的樣式，比如紅色加粗。
<span style="font-size:18px;">案例3：結合使用<div>和<span>元素進行復雜布局和樣式設計</span>
在實際的網頁設計中，通常會需要復雜的布局和樣式設計。<div>和<span>元素的組合使用可以讓我們更加靈活地實現這些復雜需求。以下是一個案例，展示了如何結合使用<div>和<span>元素進行復雜布局和樣式設計。
<code><div class="container"> <div class="header"> <h1>歡迎來到我們的網站！</h1> </div> <div class="sidebar"> <ul> <li>菜單1</li> <li>菜單2</li> <li>菜單3</li> </ul> </div> <div class="content"> <p>這是我們的內容區域。</p> </div> <div class="footer"> <p>版權所有 (c) 2021</p> </div> </div></code>
在上面的代碼中，我們使用了多個<div>元素來定義不同部分的布局，比如頭部、側邊欄、內容區域和頁腳。通過為這些<div>元素添加樣式類名，我們可以對它們進行樣式設計和布局。同時，我們還使用了<span>元素來添加特定文本的樣式，比如網頁標題和版權聲明。
通過以上案例，我們可以看到<div>和<span>元素在網頁設計中的重要性和靈活性。它們不僅可以用于簡單的布局和樣式設計，還可以組合和嵌套使用，實現復雜的布局和樣式效果。因此，熟練掌握<div>和<span>元素的使用方法對于進行網頁設計是非常重要的。