今天我們來(lái)學(xué)習(xí)一下如何使用CSS3和H5來(lái)顯示氣溫圖。 首先，我們需要一個(gè)包含氣溫信息的數(shù)據(jù)源。我們可以使用JavaScript來(lái)獲取這些數(shù)據(jù)并將其渲染到HTML頁(yè)面上。 接下來(lái)，我們需要使用CSS3來(lái)樣式化這些數(shù)據(jù)。我們可以使用偽元素（pseudo-elements）來(lái)創(chuàng)建矩形，設(shè)置背景顏色，以及將溫度數(shù)據(jù)顯示在其中。例如： 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來(lái)創(chuàng)建了一個(gè)灰色的矩形，在溫度數(shù)值上方，使用了translateY(-50%)屬性使其在元素的中心位置對(duì)齊。我們還使用了span標(biāo)簽來(lái)顯示溫度數(shù)據(jù)，并將其置于矩形的中心位置。 最后，我們可以使用JavaScript來(lái)更新氣溫?cái)?shù)據(jù)并在頁(yè)面上渲染出來(lái)。例如： var temperature = 20; // 這里是獲取到的氣溫?cái)?shù)據(jù) document.querySelector('pre span').innerText = temperature + '℃'; 使用上述CSS和JavaScript代碼，我們可以快速輕松地創(chuàng)建一個(gè)氣溫圖，并更新其中的數(shù)據(jù)，適用于各種web應(yīng)用場(chǎng)景。