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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手写样式
稍微偷懒了。~