今天主要学习了html5的新增语义标签以及后台页面的布局
代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档管理</title>
<style>
body{
background-color: #C7EDCC;
}
table,tr,td{
border:1px solid black;
}
table{
width:860px;
height:300px;
border-collapse: collapse;
margin:auto;
text-align: center;
}
table caption{
font-size: 2rem;
margin-bottom: 20px;
}
table tr:first-child{
background-color: #ADD8E6;
}
a{
color:#008000;
text-decoration-line: none;
}
p{
text-align: center;
}
p a{
display: inline-block;
width: 35px;
height: 20px;
border: 1px solid #008000;
}
.active{
background-color: #008000;
color: white;
}
a:hover{
color: red;
text-decoration-line: underline;
}
</style>
</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="images/1.jpg" width="40px" alt=""></td>
<td><a href="">apple公司最新旗舰产品: X 系列手机隆重上市</a></td>
<td>手机</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td><img src="images/2.jpg" width="40px" alt=""></td>
<td><a href="">华为P20手机将全面采用自主研发的麒麟系统</a></td>
<td>手机</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td><img src="images/3.jpg" width="40px" alt=""></td>
<td><a href="">小米9手机预计在明年8月正式上市</a></td>
<td>手机</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td><img src="images/4.jpg" width="40px" alt=""></td>
<td><a href="">OPPO手机勇夺印度市销售冠军</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="">...</a>
<a href="">尾页</a>
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分类管理</title>
<style>
body{
background-color: #C7EDCC;
}
table,tr,td{
border:1px solid black;
}
.red{
color:red;
}
table{
width:860px;
height:200px;
border-collapse: collapse;
margin:auto;
text-align: center;
}
table caption{
font-size: 1.5rem;
margin-bottom: 20px;
font-weight: bold;
}
table tr:first-child{
background-color: #ADD8E6;
}
a{
color:#008000;
text-decoration-line: none;
}
p{
text-align: center;
}
p a{
display: inline-block;
width: 35px;
height: 20px;
border: 1px solid #008000;
}
.active{
background-color: #008000;
color: white;
}
a:hover{
color: red;
text-decoration-line: underline;
}
</style>
</head>
<body>
<table>
<caption>分类管理</caption>
<tr>
<td>ID</td>
<td>分类名称</td>
<td>层级</td>
<td>是否启用</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>手机</td>
<td>顶级</td>
<td>启用</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>笔记本电脑</td>
<td>顶级</td>
<td class="red">禁用</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>打印机</td>
<td>顶级</td>
<td>启用</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>显示器</td>
<td>顶级</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="">...</a>
<a href="">尾页</a>
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产品管理</title>
<style>
table,tr,td{
border:1px solid black;
}
table{
width:760px;
height:300px;
border-collapse: collapse;
margin:auto;
text-align: center;
}
table caption{
font-size: 1.5rem;
margin-bottom: 20px;
font-weight: bold;
}
table tr:first-child{
background-color: #ADD8E6;
}
a{
color:#008000;
text-decoration-line: none;
}
p{
text-align: center;
}
p a{
display: inline-block;
width: 35px;
height: 20px;
border: 1px solid #008000;
}
.active{
background-color: #008000;
color: white;
}
a:hover{
color: red;
text-decoration-line: underline;
}
</style>
</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="images/1.jpg" width="40px" alt=""></td>
<td>X</td>
<td>5888</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td><img src="images/2.jpg" width="40px" alt=""></td>
<td>华为 P20</td>
<td>7888</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td><img src="images/3.jpg" width="40px" alt=""></td>
<td>小米 9</td>
<td>6899</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td><img src="images/4.jpg" width="40px" alt=""></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="">...</a>
<a href="">尾页</a>
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
