【小练习03】CSS-表格（table）--天气预报

最新推荐文章于 2021-12-22 09:57:16 发布

Java仗剑走天涯

最新推荐文章于 2021-12-22 09:57:16 发布

阅读量1.3k

点赞数

分类专栏：前端基础HTML5/CSS3 文章标签： css table 练习

本文链接：https://blog.csdn.net/baidu_37107022/article/details/71713520

版权

前端基础HTML5/CSS3 专栏收录该内容

46 篇文章

订阅专栏

表格基础知识链接：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