天氣預報是人們日常生活中非常重要的信息之一，而如何將天氣預報呈現得更加美觀、直觀，就是前端開發(fā)者需要考慮的問題。使用 CSS 編寫天氣預報頁面可以讓頁面看起來更為美觀。

下面是關于天氣預報如何使用 CSS 編寫：

.weather {
width: 300px;
height: 200px;
background-color: #F5F5F5;
padding: 20px;
border-radius: 10px;
box-shadow: 2px 2px 5px #888888;
}
.weather h2 {
text-align: center;
font-size: 28px;
margin-bottom: 20px;
}
.weather p {
font-size: 16px;
margin-bottom: 10px;
}
.weather .temperature {
font-size: 40px;
font-weight: bold;
}
.weather .description {
font-size: 20px;
}
.weather .icon {
margin-top: 20px;
text-align: center;
}
.weather .icon img {
width: 60px;
}

代碼解釋：

首先，我們定義了一個名為 “weather” 的 div 容器，并設置寬度、高度、背景色、內邊距、邊角半徑、陰影等樣式。

接著，我們對容器內的文字樣式進行設置，設置標題的對齊方式、字體大小和標題與 content 之間的間距。
我們給溫度和天氣描述分別設置了合適的字體大小，以及分別用了 font-weight 和 font-size 設置字體的美化樣式。

最后，我們設置了天氣圖標，讓其居中顯示，并控制了圖片大小。

這份代碼只是一個示例，使用 CSS 編寫天氣預報頁面可以有很多種不同的風格，開發(fā)者可根據自己的喜好和具體需求進行調整，以達到更好的效果。