<div class="footer">是HTML中常用的CSS類名之一，它代表著網頁的頁腳元素。在網頁設計中，頁腳通常位于頁面的底部，包含了一些網頁的附加信息，比如版權聲明、聯系方式等。通過使用<div class="footer">，我們可以為這部分內容添加特定的樣式，使其在頁面上呈現出一致、美觀的效果。

以下是幾個使用<div class="footer">的代碼案例，它們展示了不同的設計風格和功能。

1. 簡約風格的頁腳

<div class="footer">
<p>版權所有 (c) 2022 - 網站名稱</p>
</div>

在這個案例中，我們只是簡單地使用<div class="footer">將版權信息放置在頁面的底部。通過添加適當的樣式，比如居中對齊、邊框線等，我們可以使頁腳看起來更加整潔、規范。

2. 帶有鏈接的社交媒體圖標頁腳

<div class="footer">
<p>版權所有 (c) 2022 - 網站名稱</p>
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>

這個案例展示了一個帶有社交媒體圖標的頁腳。我們使用<ul>標簽創建了一個無序列表，每個列表項都包含了一個鏈接和相應的圖標。通過使用適當的CSS樣式，我們可以使這些圖標在鼠標懸停時改變顏色、透明度等，增加用戶與社交媒體的互動。

3. 多語言切換頁腳

<div class="footer">
<p>版權所有 (c) 2022 - 網站名稱</p>
<ul>
<li><a href="#">中文</a></li>
<li><a href="#">English</a></li>
<li><a href="#">Espa~nol</a></li>
<li><a href="#">Francais</a></li>
</ul>
</div>

在這個案例中，我們創建了一個多語言切換的頁腳。通過添加多個<a>標簽，我們可以實現用戶可以切換網站顯示語言的功能。通過CSS樣式，我們可以使當前語言鏈接突出顯示，或者在用戶切換語言時給出相應的提示。

綜上所述，<div class="footer">是一種常見的HTML CSS類名，它用于定義網頁的頁腳元素。通過使用不同的樣式和功能，我們可以創造出各種形式的頁腳，以適應不同的設計需求。無論是簡約風格的版權聲明，還是帶有社交媒體圖標的互動式頁腳，或者是多語言切換的功能性頁腳，我們都可以通過<div class="footer">輕松實現。希望本文的案例和說明能夠幫助您更好地使用和設計<div class="footer">。