实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产品管理</title>
</head>
<body>
<table>
<caption>产品管理</caption>
<tr>
<td>产品编号</td>
<td>产品名称</td>
<td>产品类别</td>
<td>上市时间</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>荣耀9</td>
<td>荣耀</td>
<td>2017年6月</td>
<td><a href="">编辑</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>HUAWEI P20 Pro</td>
<td>HUAWEI P系列</td>
<td>2018年4月</td>
<td><a href="">编辑</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>荣耀畅玩7</td>
<td>荣耀畅玩系列</td>
<td>2018年5月</td>
<td><a href="">编辑</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>HUAWEI Mate RS 保时捷设计</td>
<td>HUAWEI Mate系列</td>
<td>2018年4月12日</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>
a{text-decoration: none;color:green;}
a:hover{color: brown;text-decoration: underline;}
table,td{border-collapse: collapse;width:600px;margin:auto;border:solid 1px black;text-align: center}
table tr:first-child{background: lightblue;color: darkred;}
tr,td{height: 50px;}
table caption{font-size: 1.5rem;margin: 20px auto;}
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>运行实例 »
点击 "运行实例" 按钮查看在线实例
