CSS代码
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>家政员信息表</title>
<style>
table,tr,th,td{ border:1px solid #555; margin: 0; padding: 0;}
table{box-shadow: 5px 5px 5px #888; border-collapse: collapse; text-align: center; width:98%; margin:0 auto; background: url(../images/tab_bg.png) no-repeat;}
th{ padding:10px 12px 10px 12px;background:rgba(173,216,230,0.5); color:red}
td{padding:5px 5px}
caption{font-size:1.2em;}
caption small{ font-size:0.5em; margin-left:2%;}
.headpic img{border-radius:50%;box-shadow:3px 3px 3px #666;}
</style>
</head>
<body><table>
<caption><h2>订单管理<small><a href="">添加</a></small></h2></caption>
<tbody>
<tr align="center">
<th>订单号</th>
<th>姓名</th>
<th>籍贯</th>
<th>学历</th>
<th>出生日期</th>
<th>婚姻状况</th>
<th>身份证号码</th>
<th>意向工作</th>
<th>工作经验</th>
<th>实名认证</th>
<th>所属公司</th>
<th>照片</th>
<th>状态</th>
<th colspan="2">操作</th>
</tr>
<tr align="center">
<td>1</td>
<td>江伊帆</td>
<td>广东</td>
<td>中专</td>
<td>1995-05-10</td>
<td>未婚</td>
<td>4401**19950510****</td>
<td> 育婴师/早教 </td>
<td>1</td>
<td><img src="../images/SFZcredit.png" alt="已实名" title="已实名"></td>
<td>金贝家政连锁服务机构</td>
<td class="headpic"><img src="../images/1.jpg" height="80"></td>
<td>已派单</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
<tr align="center">
<td>1</td>
<td>江伊帆</td>
<td>广东</td>
<td>中专</td>
<td>1995-05-10</td>
<td>未婚</td>
<td>4401**19950510****</td>
<td> 育婴师/早教 </td>
<td>1</td>
<td><img src="../images/SFZcredit_no.png" alt="未实名" title="未实名"></td>
<td>金贝家政连锁服务机构</td>
<td class="headpic"><img src="../images/2.jpg" height="80"></td>
<td>未派单</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
<tr align="center">
<td>1</td>
<td>江伊帆</td>
<td>广东</td>
<td>中专</td>
<td>1995-05-10</td>
<td>未婚</td>
<td>4401**19950510****</td>
<td> 育婴师/早教 </td>
<td>1</td>
<td><img src="../images/SFZcredit.png" alt="已实名" title="已实名"></td>
<td>金贝家政连锁服务机构</td>
<td class="headpic"><img src="../images/3.jpg" height="80"></td>
<td>已派单</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
<tr align="center">
<td>1</td>
<td>江伊帆</td>
<td>广东</td>
<td>中专</td>
<td>1995-05-10</td>
<td>未婚</td>
<td>4401**19950510****</td>
<td> 育婴师/早教 </td>
<td>1</td>
<td><img src="../images/SFZcredit.png" alt="已实名" title="已实名"></td>
<td>金贝家政连锁服务机构</td>
<td class="headpic"><img src="../images/4.jpg" height="80"></td>
<td>已派单</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
<tr align="center">
<td>1</td>
<td>江伊帆</td>
<td>广东</td>
<td>中专</td>
<td>1995-05-10</td>
<td>未婚</td>
<td>4401**19950510****</td>
<td> 育婴师/早教 </td>
<td>1</td>
<td><img src="../images/SFZcredit_no.png" alt="未实名" title="未实名"></td>
<td>金贝家政连锁服务机构</td>
<td class="headpic"><img src="../images/5.jpg" height="80"></td>
<td>未派单</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
