实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户管理</title>
</head>
<body>
<table>
<caption>用户管理</caption>
<tr>
<td>ID</td>
<td>用户名</td>
<td>邮箱</td>
<td>角色</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>admin</td>
<td>admin@php.cn</td>
<td>超级管理员</td>
<td>
<a href="">编辑</a>
</td>
</tr>
<tr>
<td>2</td>
<td>lucy</td>
<td>lucy@php.cn</td>
<td>会员</td>
<td>
<a href="">编辑</a>|<a href="">删除</a>
</td>
</tr>
<tr>
<td>3</td>
<td>韩梅</td>
<td>hh@php.cn</td>
<td>会员</td>
<td>
<a href="">编辑</a>|<a href="">删除</a>
</td>
</tr>
</table>
<p><a href="">首页</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="" class="more">....</a><a href="">尾页</a></p>
<style>
table,td{border:solid 1px black;}
table{border-collapse: collapse;width: 650px;margin: auto;text-align: center;}
table caption{font-size: 1.5rem;font-weight: bold;margin-bottom: 20px;}
td{padding: 10px;}
tr:first-child{background: lightblue;}
a{text-decoration: none;color:green;}
a:hover{text-decoration: underline;color:brown;}
p{text-align: center;}
p a:first-child,p a:last-child{width: 56px;}
p a{display: inline-block;width: 28px;height: 24px;border: solid 1px green;margin-left: 2px;line-height: 24px;}
.active{background: green;color: #FFF;}
.more{border: none;}
</style>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
