日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 >

使用表格和 CSS 设计天气预报样式

發(fā)布時(shí)間：2024/3/24 41 豆豆
生活随笔 收集整理的這篇文章主要介紹了 使用表格和 CSS 设计天气预报样式 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

使用表格和 CSS 設(shè)計(jì)天氣預(yù)報(bào)樣式

一、實(shí)驗(yàn)題目：使用表格和 CSS 設(shè)計(jì)天氣預(yù)報(bào)樣式
二、實(shí)驗(yàn)內(nèi)容：設(shè)計(jì)如下圖所示的天氣預(yù)報(bào)樣式，可適當(dāng)加入其他元素
三、實(shí)驗(yàn)步驟：寫明實(shí)驗(yàn)具體內(nèi)容及步驟、源代碼、實(shí)驗(yàn)結(jié)果等（附截圖）
四、實(shí)驗(yàn)總結(jié)：實(shí)驗(yàn)中遇到的問題、思考與總結(jié)等

源代碼：

<!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>天氣預(yù)報(bào)</title><style>div{background-color: #336699;color:white; }td{font-size:22px;}.juxing{width: 80px;height: 30px;border: 2px solid rebeccapurple;border-radius: 5px ;background:green;border:0px;}.shixian{border-right:1px solid #FFF}</style> </head><body><h1 align="center">天氣預(yù)報(bào)</h1><div><br><h2 align="left">&nbsp;&nbsp;&nbsp;&nbsp;04月17日 周六 農(nóng)歷三月初六</h2><table width="100%" height="450" ><tr><td align="center" valign="top"><div class="shixian"><img width="100" height="100" src="images/ic_cloudy.png" alt="陰天"><p><font size="21">6℃</font></p><p>-1~9℃</p><p>陰天</p><p>微風(fēng)</p><div class="juxing">良</div></div></td><td align="center" valign="top"><div class="shixian"><p>周日</p><p>04月18日</p><img width="60" height="60" src="images/ic_rainstorm.png" alt="中雨"><p>4~17℃</p><p>中雨</p><p>北風(fēng)3~4級</p><div class="juxing">良</div></div></td><td align="center" valign="top"><div class="shixian"><p>周一</p><p>04月19日</p><img width="60" height="60" src="images/ic_thunderstorm.png" alt="雷陣雨"><p>4~21℃</p><p>雷陣雨</p><p>北風(fēng)3~4級</p><div class="juxing">良</div></div></td><td align="center" valign="top"><div class="shixian"><p>周二</p><p>04月20日</p><img width="60" height="60" src="images/ic_light_rain.png" alt="小雨"><p>6~19℃</p><p>小雨</p><p>北風(fēng)3~4級</p><div class="juxing">良</div></div></td><td align="center" valign="top"><p>周三</p><p>04月21日</p><img width="60" height="60" src="images/ic_sunny.png" alt="多云轉(zhuǎn)晴"><p>9~23℃</p><p>多云轉(zhuǎn)晴</p><p>微風(fēng)</p><div class="juxing">優(yōu)</div></td></tr></table></div></body> </html>

實(shí)現(xiàn)效果：

總結(jié)

以上是生活随笔為你收集整理的使用表格和 CSS 设计天气预报样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。