实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档管理</title>
<style>
table{
width: 800px;
margin:auto;
border-collapse: collapse;
border:1px solid #000;
text-align:center;
}
caption{
font-size:25px;
margin-bottom: 20px;
}
table tr th{
height:40px;
border:1px solid #000;
background:lightskyblue;
}
table tr td{
border: 1px solid #000;
}
table tr td a{
text-decoration: none;
color:#000;
}
table tr td img{
width: 80px; height:80px;
padding:10px;
border-radius: 50%;
}
.page{
width: 800px;
height: 30px;
margin:auto;
text-align: center;
margin-top: 20px;
}
.page a{
color: #000;
text-decoration: none;
border: 1px solid green;
line-height: 30px;
padding:0px 5px;
margin-left: 2px;
}
.page a:nth-child(2){
background:#ccc;
}
</style>
</head>
<body>
<table>
<caption>文档管理</caption>
<tr>
<th>ID</th>
<th>标题图片</th>
<th>文档标题</th>
<th>所属分类</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td><img src="./static/images/1.png" alt=""></td>
<td>标题</td>
<td>分类</td>
<td><a href="">购 买</a> |
<a href="">删除</a>
</td>
</tr>
<tr>
<td>2</td>
<td><img src="./static/images/1.png" alt=""></td>
<td>标题</td>
<td>分类</td>
<td><a href="">购 买</a> |
<a href="">删除</a>
</td>
</tr>
<tr>
<td>3</td>
<td><img src="./static/images/1.png" alt=""></td>
<td>标题</td>
<td>分类</td>
<td><a href="">购 买</a> |
<a href="">删除</a>
</td>
</tr>
</table>
<p class="page"><a href="">首页</a><a href="">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="">5</a><a href="">下五页</a><a href="">尾页</a></p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
