【小练习03】CSS-表格（table）--天气预报
生活随笔
收集整理的這篇文章主要介紹了
【小练习03】CSS-表格（table）--天气预报
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
表格基礎(chǔ)知識鏈接：http://blog.csdn.net/baidu_37107022/article/details/71713281
練習(xí)要求實現(xiàn)如下效果圖：
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>body{background: #ebeff7;}/*清除表格默認(rèn)樣式*/table{border-collapse: collapse;}th,td{padding: 0;}table{width: 640px;margin: 0 auto;}th,td{border: 1px solid #99b0da;text-align: center;}th{font: 14px/30px "微軟雅黑";background: #dbe3fa;}td{font: 12px/28px "微軟雅黑";background: #fff;}.bg{background: #f4f7fc;}img{vertical-align: middle;}.high{color: #e54600;}.low{color: #7171d1;}.space{height: 4px;border: none;background: #ebeff7;}</style></head><body><table><thead><tr><th colspan="2">日期</th><th colspan="2">天氣現(xiàn)象</th><th>氣溫</th><th>風(fēng)向</th><th>風(fēng)力</th></tr></thead><tbody><tr><td rowspan="2" class="bg">22日星期五</td><td class="bg">白天</td><td><img src="img/img_01.gif"/></td><td>晴間多云</td><td class="high">高溫7C</td><td>無持續(xù)風(fēng)向</td><td>微風(fēng)</td></tr><tr><td class="bg">夜間</td><td><img src="img/img_02.gif"/></td><td>晴</td><td class="low">低溫-4C</td><td>無持續(xù)風(fēng)向</td><td>微風(fēng)</td></tr><tr><td colspan="7" class="space"></td></tr><tr><td rowspan="2" class="bg">22日星期五</td><td class="bg">白天</td><td><img src="img/img_01.gif"/></td><td>晴間多云</td><td class="high">高溫7C</td><td>無持續(xù)風(fēng)向</td><td>微風(fēng)</td></tr><tr><td class="bg">夜間</td><td><img src="img/img_02.gif"/></td><td>晴</td><td class="low">低溫-4C</td><td>無持續(xù)風(fēng)向</td><td>微風(fēng)</td></tr></tbody></table></body> </html>源碼地址：http://download.csdn.net/detail/baidu_37107022/9840533
總結(jié)
以上是生活随笔為你收集整理的【小练习03】CSS-表格（table）--天气预报的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用Eclipse进行Javaweb项目
- 下一篇： 一天搞定CSS：表单（form）--20