博客列表 >322作业

322作业

专业交作业
专业交作业原创
2018年03月26日 14:45:07921浏览

{FR)S6Q_~)V]Q$V()_~4610.png

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>阴影背景练习</title>
	<style type="text/css">
		table,th,td{
			border: 1px solid #333;	
			padding: 10px;
		}
		table{
			border-collapse: collapse;
			text-align: center;
			width: 40%;
			margin: 100px;
			box-shadow: 5px 5px 6px #582;
			background-image: url(../322/images/bg.png);
			background-repeat: no-repeat;
			background-size: cover;
		}
		td img{
			width: 30px;
			border-radius: 50%;
			box-shadow: 3px 3px 3px #588;
		}
		th{
			background-color: rgba(180,241,695,0.4);
		}
		caption{
			font-size: 1.6em;
			font-weight: bolder;
			padding: 20px;
		}
	</style>
</head>
<body>
	<table >
		<caption>出差统计</caption>
		<tr>
			<th colspan="2" rowspan="2">姓名</th>
			<th colspan="3">出差地区</th>
		</tr>
		<tr>
			<th>北京</th>
			<th>上海</th>
			<th>广州</th>
		</tr>
		<tr>
			<td><img src="../images/1.jpg"></td>
			<td>张三</td>
			<td>1天</td>
			<td>3天</td>
			<td>5天</td>
		</tr>
		<tr>
			<td><img src="../images/2.jpg"></td>
			<td>李四</td>
			<td>2天</td>
			<td>4天</td>
			<td>6天</td>
		</tr>
		<tr>
			<td><img src="../images/3.jpg"></td>
			<td>王五</td>
			<td>3天</td>
			<td>6天</td>
			<td>9天</td>
		</tr>
		<tr>
			<td><img src="../images/4.jpg"></td>
			<td>赵六</td>
			<td>6天</td>
			<td>9天</td>
			<td>3天</td>
		</tr>
		
	</table>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


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