今天学习了html5新增的语义化的布局标签：<header><footer><main><article><aside><nav><section>与主体布局用圣杯来写了后台管理（iframe）
手写作业:html5新增语义化布局标签的名称与功能
【文档管理】代码：
实例
<!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>
</tr>
<tr>
<td>1</td>
<td>程序员面试有哪些小窍门？最接地气的</td>
<td>中文网-头条</td>
<td><a href="">编辑</a><a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>phpStudy有快捷键设置吗</td>
<td>中文网-问答</td>
<td><a href="">编辑</a><a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>Parallels Desktop 13 for Mac 13.1.0.43108</td>
<td>中文网-下载</td>
<td><a href="">编辑</a><a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>echarts做后台报表</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,td{
border: 1px solid black;
}
table{
width: 650px;
margin: 0 auto;
border-collapse:collapse ;
text-align: center;
}
td{
padding: 10px;
}
table caption{
font-size: 1.5rem;
font-weight: bolder;
margin-bottom: 20px;
}
table tr:first-child{
background-color: lightsteelblue;
margin-top:20px ;
}
a{
text-decoration-line: none;
color: green;
}
a:hover{
text-decoration-line: underline;
color: brown;
}
p{
text-align: center;
}
p a{
display: inline-block;
width: 28px;
height: 24px;
border: 1px solid green;
margin-left: 2px;
line-height: 24px;
}
p a:first-child{
width: 56px;
}
p a:last-child{
width: 56px;
}
p a.active{
background-color: green;
color: white;
}
.more{
border: none
;
}
</style>运行实例 »
点击 "运行实例" 按钮查看在线实例
【分类管理】代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分类管理</title>
<style>
table,td{
border: none;
}
table{
width: 600px;
margin: 0 auto;
border-collapse:collapse ;
}
table td{
border: 1px solid black;
text-align: center;
padding: 5px;
}
table tr:first-child {
background-color: #0a7e9a;
}
.disable{
color: red;
}
td a{
text-decoration-line: none;
color: black;
}
td a:hover{
text-decoration-line: underline;
color: red;
}
a{
text-decoration: none;
}
p{
text-align: center;
}
p a{
display: inline-block;
width: 28px;
height: 24px;
border: 1px solid green;
margin-left: 2px;
line-height: 24px;
}
p a:first-child{
width: 56px;
}
p a:last-child{
width: 56px;
}
p a.active{
background-color: green;
color: white;
}
.more{
border: none
;
}
</style>
</head>
<body>
<table>
<caption>分类管理</caption>
<tr>
<td>ID</td>
<td>分类名称</td>
<td>层级</td>
<td>是否启用</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>PHP</td>
<td>1级</td>
<td>启用</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>Java</td>
<td>2级</td>
<td class="disable">禁用</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>1</td>
<td>Javascript</td>
<td>3级</td>
<td>启用</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>C++</td>
<td>1级</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>运行实例 »
点击 "运行实例" 按钮查看在线实例
【产品管理】代码：
实例
<!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><img src="https://img.php.cn/upload/article/000/000/003/5b596217c2850304.jpg" alt="" width="50"></td>
<td>iPhone X</td>
<td>5888</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td><img src="https://img.php.cn/upload/course/000/000/001/5b5576c6d5609921.jpg" alt="" width="50"></td>
<td>华为 P20</td>
<td>7888</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="" width="50"></td>
<td>小米 9</td>
<td>6899</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td><img src="https://img.php.cn/upload/course/000/000/001/5b69682bd63ba306.png" alt="" width="50"></td>
<td>OPPO X1</td>
<td>3999</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: 650px;
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: lightblue;
}
table caption {
font-size: 1.5rem;
font-weight: bolder;
margin-bottom: 20px;
}
p {
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 green;
margin-left:2px;
line-height: 24px;
}
/*当前页样式*/
.active {
background-color: green;
color: white;
}
.more {
border: none;
}
</style>运行实例 »
点击 "运行实例" 按钮查看在线实例