生活随笔
收集整理的這篇文章主要介紹了
使用表格和 CSS 设计天气预报样式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用表格和 CSS 設計天氣預報樣式
一、實驗題目：使用表格和 CSS 設計天氣預報樣式
二、實驗內容：設計如下圖所示的天氣預報樣式，可適當加入其他元素
三、實驗步驟：寫明實驗具體內容及步驟、源代碼、實驗結果等（附截圖）
四、實驗總結：實驗中遇到的問題、思考與總結等
源代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>天氣預報
</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">天氣預報
</h1><div><br><h2 align="left"> 04月17日 周六 農歷三月初六
</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>微風
</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>北風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>北風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>北風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="多云轉晴"><p>9~23℃
</p><p>多云轉晴
</p><p>微風
</p><div class="juxing">優
</div></td></tr></table></div></body>
</html>
實現效果：
總結
以上是生活随笔為你收集整理的使用表格和 CSS 设计天气预报样式的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
