生活随笔
收集整理的這篇文章主要介紹了
使用表格和 CSS 设计天气预报样式
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
使用表格和 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"> 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)容還不錯，歡迎將生活随笔推薦給好友。
