html5中新增的语义化布局标签
<header role="banner"> 页面头部，logo,导航
<footer>页面底部信息
<main>页面主体,一个页面只能有一个<main>标签
<aside role="news">边栏，侧栏
<article>独立主体区域
<nav>导航
<section>区块
<div> 空容器块，可以自定义区块
实例 后台文档管理
<!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>574442</td>
<td><img src="http://danji6deht.danji6.com/uploadfile/2018/40/dkux5wsimxg.png" alt="" width="60"></td>
<td><a href="">武林逍遥官网版</a></td>
<td>角色扮演</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>599290</td>
<td><img src="http://www.danji6.com/uploadfile/2018/00/vx53bpgfow5.png" alt="" width="50"></td>
<td><a href="">长生诀</a></td>
<td>角色扮演</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>587522</td>
<td><img src="http://www.danji6.com/uploadfile/2018/01/cuzokdoejmp.jpg" alt="" width="50"></td>
<td><a href="">PilotEdit 文件编辑器</a></td>
<td>应用辅助</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>599872</td>
<td><img src="http://danji6deht.danji6.com/uploadfile/2018/30/z5ig3fv4zai.png" alt="" width="50"></td>
<td><a href="">霸刀战魂</a></td>
<td>角色扮演</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
</table>
<!--分页-->
<p>
<a href="">首页</a>
<a href="" class="active">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="" class="more">...</a>
<a href="">尾页</a>
</p>
</body>
</html>
<style>
table, th, td {
border: 1px solid black;
}
table {
width: 780px;
margin: auto;
border-collapse: collapse;
text-align: center;
}
td {
padding: 10px;
}
a {
text-decoration-line: none;
color: green;
}
a:hover {
color: brown;
text-decoration-line: underline;
}
tr:first-child {
margin-top: 20px;
background-color: #3a6ea5;
color: #eee;
}
tr:nth-child(n+2) td:nth-child(3) { text-align: left;}
table caption {
font-size: 1.5rem;
font-weight: bolder;
margin-bottom: 20px;
}
p {
color: #333;
text-align: center;
}
/*首页样式*/
p a:first-child {
width: 56px;
}
p a:last-child {
width: 56px;
}
p a {
display: inline-block;
width: 28px;
height: 24px;
border: 1px solid #3a6ea5;
margin-left:2px;
line-height: 24px;
}
/*当前页样式*/
.active {
background-color: green;
color: white;
}
.more {
border: none;
}
</style>运行实例 »
点击 "运行实例" 按钮查看在线实例
