天氣預(yù)報是我們生活中必不可少的一部分,CSS可以幫助我們更好的呈現(xiàn)和展示天氣預(yù)報的信息。下面是一些CSS代碼示例,可以幫助我們更好的運用CSS來制作天氣預(yù)報。
/*設(shè)置背景顏色*/ body { background: #f2f2f2; } /*設(shè)置容器的樣式*/ .weather-container { width: 300px; margin: 0 auto; background: #fff; border: 1px solid #ccc; } /*設(shè)置標(biāo)題的樣式*/ .weather-title { font-size: 24px; text-align: center; padding: 10px; border-bottom: 1px solid #ccc; } /*設(shè)置列表的樣式*/ .weather-list { list-style: none; margin: 20px; padding: 0; } /*設(shè)置列表項的樣式*/ .weather-list li { padding: 10px; border-bottom: 1px solid #ccc; } /*設(shè)置每個列表項中日期和天氣狀況的樣式*/ .weather-list li .date { font-weight: bold; margin-bottom: 5px; } .weather-list li .condition { font-size: 14px; color: #666; }
以上就是一些基本的CSS代碼示例,需要在HTML文件中嵌入這些樣式:
<link rel="stylesheet" href="style.css"> <div class="weather-container"> <h2 class="weather-title">天氣預(yù)報</h2> <ul class="weather-list"> <li> <span class="date">2021-05-20</span> <span class="condition">多云</span> </li> <li> <span class="date">2021-05-21</span> <span class="condition">晴</span> </li> <li> <span class="date">2021-05-22</span> <span class="condition">陰</span> </li> </ul> </div>
其中l(wèi)ink標(biāo)簽是用于引入樣式表,style.css是我們剛剛寫的CSS文件名。
通過以上的代碼,我們可以看到天氣預(yù)報的樣式變得更加清晰、易讀,出行前查閱天氣也變得更加方便。