3月22日 CSS 盒子 / CSS 控制表格样式
运行效果：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>会员管理系统</title>
<style type="text/css" media="screen">
/* 先对表格设置一个边框 */
table,th,td{
border:1px solid lightgray;
}
table{
width:60%;
margin:20px auto;
text-align: center;
border-collapse:collapse; /* 边框重叠 */
}
td img{
width:40px;
border-radius:50%;
box-shadow:3px 3px 3px #888; /* 设置边框阴影 */
}
table caption{
margin-bottom:20px;
font-size:30px;
font-weight:bold; /* 加粗 */
}
table th{
color:#669;
margin-top:20px;
background: lightgrey;
font-size:18px;
}
.green{
color:red;
}
/*鼠标划动变色*/
/* 开始默认颜色 */
a:visited{
color:blue;
}
/* 鼠标移动改变颜色 */
a:hover{
color:red;
}
img:hover{
width:50px;
}
</style>
</head>
<body>
<table>
<caption>会员管理系统</caption>
<tr>
<th>编号</th>
<th>会员名称</th>
<th>头像</th>
<th>邮件地址</th>
<th>注册时间</th>
<th colspan="2">操作</th>
</tr>
<tr>
<td>01</td>
<td>小红</td>
<td><img src="http://img2.woyaogexing.com/2018/03/22/5107f28c9aaee69b!400x400_big.jpg"></td>
<td>xiaohong@qq.com</td>
<td class="green">2017-03-06</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
<tr>
<td>02</td>
<td>小丽</td>
<td><img src="http://img2.woyaogexing.com/2018/03/22/3927ba3585d50e55!400x400_big.jpg"></td>
<td>xiaoli@qq.com</td>
<td class="green">2017-06-08</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
<tr>
<td>03</td>
<td>小青</td>
<td><img src="http://img2.woyaogexing.com/2018/03/22/bcf884fde1baba59!400x400_big.jpg"></td>
<td>xiaoqing@qq.com</td>
<td class="green">2016-05-03</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
<tr>
<td>04</td>
<td>小花</td>
<td><img src="http://img2.woyaogexing.com/2018/03/22/18d742466c3a7c66!400x400_big.jpg"></td>
<td>xiaohua@qq.com</td>
<td class="green">2018-05-07</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
<tr>
<td>05</td>
<td>小白</td>
<td><img src="http://img2.woyaogexing.com/2018/03/22/82154113fd62776e!400x400_big.jpg"></td>
<td>xiaobai@qq.com</td>
<td class="green">2018-04-09</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写样式
稍微偷懒了。~
