今天我們來學習一下如何使用CSS3和H5來顯示氣溫圖。 首先，我們需要一個包含氣溫信息的數據源。我們可以使用JavaScript來獲取這些數據并將其渲染到HTML頁面上。 接下來，我們需要使用CSS3來樣式化這些數據。我們可以使用偽元素（pseudo-elements）來創建矩形，設置背景顏色，以及將溫度數據顯示在其中。例如： pre { position: relative; padding: 10px; background-color: #f0f0f0; border: 1px solid #ccc; font-size: 14px; } pre::before { content: ''; display: inline-block; position: absolute; top: 50%; left: 0; width: 30px; height: 100px; background-color: #ccc; transform: translateY(-50%); z-index: -1; } pre span { display: block; text-align: center; font-size: 24px; font-weight: bold; color: #333; margin-top: 35px; } 在上面的代碼中，我們使用了偽元素:before來創建了一個灰色的矩形，在溫度數值上方，使用了translateY(-50%)屬性使其在元素的中心位置對齊。我們還使用了span標簽來顯示溫度數據，并將其置于矩形的中心位置。 最后，我們可以使用JavaScript來更新氣溫數據并在頁面上渲染出來。例如： var temperature = 20; // 這里是獲取到的氣溫數據 document.querySelector('pre span').innerText = temperature + '℃'; 使用上述CSS和JavaScript代碼，我們可以快速輕松地創建一個氣溫圖，并更新其中的數據，適用于各種web應用場景。