博客列表 >3.22盒模型

3.22盒模型

泰礴松的博客
泰礴松的博客原创
2018年03月23日 15:40:08468浏览

今天的课还可以,基本领会

实例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>被装发放统计表</title>
	<style type="text/css">
		table,th,td {
			border: 1px solid #333;
		}
		table {
			border-collapse: collapse;
			text-align: center;
			width: 80%;
			margin: 50px auto;
			background-image: url(images/gs/bg.jpg);
			background-repeat: no-repeat;
			background-size: cover;
			box-shadow: 8px 8px 3px #888;
		}
		th,td {
			padding: 5px;
		}
		caption {
			font-size: 1.6em;
			font-weight: bolder;
            margin-bottom: 30px;
		}
		 img {
			border-radius: 50%;
			width: 50px;
			box-shadow: 3px 3px 3px #444;
		}
		th{
			background-color: rgba(155,155,15,0.3);

		}
		.hat{
			font-style: italic;
			font-weight: border;
			font-size: 1em;
		    color: green;

		}

	</style>
</head>
<body>
	<table>
		<caption>&sect 被装发放清单 &sect</caption>
		<tr>
			<th rowspan="2">编号</th>
			<th rowspan="2">姓名</th>
			<th rowspan="2">照片</th>
			<th colspan="2">上衣</th>
			<th colspan="3">下衣</th>
			<th rowspan="2" class="hat">帽子</th>
			<th rowspan="2">备注</th>

		</tr>
		<tr>
			<th>衬衣</th>
			<th>常服</th>
			<th>短裤</th>
			<th>夏裤</th>
			<th>冬裤</th>
		</tr>
		<tr>
			<td>01</td>
			<td>张三</td>
			<td><img src="0322源码/images/gs/2.jpg"></td>
			<td>185/92</td>
			<td>185/92</td>
			<td>185/96</td>
			<td>185/96</td>
			<td>185/96</td>
			<td class="hat">56</td>
			<td>  </td>
		</tr>
<tr>
			<td>01</td>
			<td>李四</td>
			<td><img src="0322源码/images/gs/3.jpg"></td>
			<td>180/92</td>
			<td>180/92</td>
			<td>180/96</td>
			<td>180/92</td>
			<td>180/96</td>
			<td class="hat">57</td>
			<td>  </td>
		</tr>
	</table>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例

1045747513.jpg22942997.jpg

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议