今天我們來介紹一種常見的使用<div>元素和CSS樣式來展示天氣信息的方法。這種方法能夠幫助網頁設計師在網頁中優雅地展示出詳細的天氣情況，讓用戶能夠快速了解到所需的天氣信息。接下來，我們將通過幾個代碼案例來詳細解釋這種使用CSS和<div>元素展示天氣的方法。

案例一：溫度與天氣圖標

<div class="weather">
<div class="temperature">
<p>20°C</p>
</div>
<div class="icon">
<p><i class="fas fa-sun"></i></p>
</div>
</div>

在這個案例中，我們使用了<div>元素，并通過CSS樣式設置了容器的樣式。其中，class="weather"用于設置天氣展示的整個區域；class="temperature"用于設置顯示溫度的區域；class="icon"用于設置顯示天氣圖標的區域。通過設置不同的CSS樣式，我們可以調整這些區域的大小、顏色等外觀。

案例二：天氣描述

<div class="weather">
<div class="temperature">
<p>20°C</p>
</div>
<div class="icon">
<p><i class="fas fa-sun"></i></p>
</div>
<div class="description">
<p>晴朗</p>
</div>
</div>

在上面的代碼中，我們添加了一個新的<div>元素，并使用class="description"來設置天氣描述區域。在<div>元素中添加了

標簽，用于顯示具體的天氣描述信息，比如"晴朗"。通過調整CSS樣式，我們可以改變描述文本的樣式，比如字體顏色、大小等，以適應網頁的整體設計。

案例三：七日天氣預報

<div class="weather-forecast">
<div class="forecast-day">
<div class="day">
<p>星期一</p>
</div>
<div class="temperature">
<p>15°C</p>
</div>
<div class="icon">
<p><i class="fas fa-cloud-sun"></i></p>
</div>
</div>
<div class="forecast-day">
<div class="day">
<p>星期二</p>
</div>
<div class="temperature">
<p>17°C</p>
</div>
<div class="icon">
<p><i class="fas fa-cloud-sun"></i></p>
</div>
</div>
<!-- 其他五天的天氣預報，類似上面的代碼 -->
</div>

在這個案例中，我們使用了多個<div>元素來展示一周的天氣預報信息。每個天氣預報都有獨立的class，比如"forecast-day"表示一個天氣預報的整個區域，"day"表示星期幾，"temperature"表示溫度，"icon"表示天氣圖標。通過設置不同的CSS樣式，我們可以使每個天氣預報在網頁中獨立顯示，并且能夠根據實際天氣情況改變圖標和溫度文本的樣式。

通過上面的幾個案例，我們可以看到使用<div>元素和CSS樣式展示天氣的靈活性。通過調整不同元素的樣式和組合方式，我們可以根據實際需要設計出獨特而美觀的天氣展示界面。這種方法可以被廣泛應用于各種網頁設計中，使用戶能夠更直觀地了解和獲取天氣信息。