天氣是一個很重要的信息，也是許多網站所需要的一個內容。在網站中加入天氣信息能夠使用戶更加方便地獲取到相關信息。而CSS中也提供了加入天氣的方法，下面我們就來學習一下。 首先，在網站中加入天氣信息需要獲取到相應的API接口。這里以和風天氣API為例，我們可以在其官網中注冊并獲取到相應的API。 接下來，在CSS中我們可以使用pre標簽來定義一段顯示天氣信息的區域。具體代碼如下：

天氣信息

接著，我們可以在CSS中定義這個pre標簽，將其樣式設置為我們想要的樣式。在樣式中，我們需要使用背景圖片來顯示天氣的圖標，同時可以使用::before偽元素來顯示天氣的溫度和描述。代碼如下： .weather { background-image: url("weather_icon.jpg"); color: #fff; padding: 20px; font-size: 24px; text-align: center; position: relative; } .weather::before { content: "當前溫度：20℃\A 天氣描述：晴朗"; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); } 最后，我們在JavaScript中使用AJAX來獲取到天氣接口返回的數據，將其溫度和描述信息設置到::before偽元素中。具體代碼如下： var request = new XMLHttpRequest(); request.open('GET', 'https://free-api.heweather.net/s6/weather/now?location=北京&key=你的key', true); request.onload = function() { if (request.status >= 200 && request.status< 400) { var data = JSON.parse(request.responseText); var temperature = data.HeWeather6[0].now.tmp; var description = data.HeWeather6[0].now.cond_txt; var weather = document.querySelector('.weather'); weather.style.display = "block"; weather.setAttribute('data-temperature', temperature); weather.setAttribute('data-description', description); weather.setAttribute('data-updated', new Date().toLocaleString()); weather.innerHTML = temperature + "℃"; } else { console.log('獲取數據失敗'); } }; request.onerror = function() { console.log('獲取數據失敗'); }; request.send(); 總之，CSS中加入天氣信息主要是通過使用pre標簽定義一個顯示天氣信息的區域，并在其中使用背景圖片和::before偽元素將信息顯示出來，而在JavaScript中則是通過獲取API接口返回的數據來設置pre標簽中的溫度和描述信息。