【小练习03】CSS-表格(table)--天气预报
来源:互联网 发布:知乎盈利了吗 编辑:程序博客网 时间:2024/06/15 17:08
表格基础知识链接:http://blog.csdn.net/baidu_37107022/article/details/71713281
练习要求实现如下效果图:
代码演示
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background: #ebeff7; } /*清除表格默认样式*/ 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">天气现象</th> <th>气温</th> <th>风向</th> <th>风力</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>无持续风向</td> <td>微风</td> </tr> <tr> <td class="bg">夜间</td> <td><img src="img/img_02.gif"/></td> <td>晴</td> <td class="low">低温-4C</td> <td>无持续风向</td> <td>微风</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>无持续风向</td> <td>微风</td> </tr> <tr> <td class="bg">夜间</td> <td><img src="img/img_02.gif"/></td> <td>晴</td> <td class="low">低温-4C</td> <td>无持续风向</td> <td>微风</td> </tr> </tbody> </table> </body></html>
源码地址:http://download.csdn.net/detail/baidu_37107022/9840533
0 0
- 【小练习03】CSS-表格(table)--天气预报
- CSS Table(表格)
- TABLE的CSS应用(细线表格)
- 一天搞定CSS:表格(table)--19
- table表格css样式
- 10013---CSS Table(表格)
- css--table表格
- 【CSS表格table】
- css表格练习
- Css制作table细线表格
- 运用CSS美化表格table
- html+css学习----表格table
- CSS基础知识梳理-table表格
- Css制作table细线表格
- CSS属性之表格(Table)
- Bootstrap 基础CSS - 表格(Tables) .table-striped
- web前端-CSS Table(表格)-009
- 14.(初级)CSS表格table注意点
- 【C++后台开发面试】STL相关
- QList类介绍
- 取余和取模在异号下的处理
- laravel5.4 cookie商品最近浏览功能
- Squid 反向代理服务器
- 【小练习03】CSS-表格(table)--天气预报
- 元素JS和jquery如何获取点击元素的id或name属性
- OA系统中常用table样式列表
- Qt5 中发布程序遇到could not find or load the Qt platform plugin "windows"
- ArrayList 和 LinkedList的区别
- CyblicBarrier使用之BrokenBarrierException
- 机器学习的精确率P,召回率R和F-score
- 分页page
- indexOf、lastIndexOf、substring等详解