一、知识点：页面布局综合运用
二、作业代码：
1、文档管理
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文档管理</title>
</head>
<body>
<header>
文档管理
</header>
<main>
<table>
<caption>文档管理</caption>
<tr>
<td>编号</td>
<td>图片</td>
<td>标题</td>
<td>分类</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td><img src="" alt="图片丢失"></td>
<td><a href="">Apple公司最新旗舰产品: iPhone X 系列手机隆重上市</a></td>
<td>手机</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td><img src="" alt="图片丢失"></td>
<td><a href="">Apple公司最新旗舰产品: iPhone X 系列手机隆重上市</a></td>
<td>手机</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td><img src="" alt="图片丢失"></td>
<td><a href="">华为P20手机将全面采用自主研发的麒麟系统片</a></td>
<td>手机</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td><img src="" alt="图片丢失"></td>
<td><a href="">OPPO手机勇夺印度市销售冠军</a></td>
<td>手机</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
</table>
<ul>
<li ><a href="">首页</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li class="more"> <a href="">...</a></li>
<li><a href="">尾页</a></li>
</ul>
<style>
*{
margin: 0;
padding: 0;
}
header{
text-align: center;
background: #eee;
height: 3rem;
line-height: 3rem;
margin: 2rem;
}
table{
width: 90%;
margin: auto;
border-collapse: collapse;
text-align: center;
}
caption{
margin: 1rem;
}
table,th,td{
border: 2px solid black;
}
table tr:first-child{
background-color: #0ee;
}
td{
padding: 1rem;
}
a{
text-decoration-line: none;
color: blue;
}
a:hover{
color: red;
}
ul{
margin-top: 1rem;
text-align: center;
}
li {
display: inline;
padding: 0.5rem;
background: #aaf;
border: 2px solid blue;
border-radius: 4px;
list-style-type: none;
}
li:nth-child(2){
background: green;
}
.more{
border: none;
background: #fff;
}
</style>
</main>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、产品管理
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>产品管理</title>
</head>
<body>
<header>
产品管理
</header>
<main>
<table>
<caption>产品管理</caption>
<tr>
<td>编号</td>
<td>图片</td>
<td>型号</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td><img src="" alt="图片丢失"></td>
<td><a href="">iPhone X </a></td>
<td>6988</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td><img src="" alt="图片丢失"></td>
<td><a href="">华为p20</a></td>
<td>7888</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td><img src="" alt="图片丢失"></td>
<td><a href="">小米9</a></td>
<td>6789</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td><img src="" alt="图片丢失"></td>
<td><a href="">OPPO x20</a></td>
<td>3999</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
</table>
<ul>
<li ><a href="">首页</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li class="more"> <a href="">...</a></li>
<li><a href="">尾页</a></li>
</ul>
<style>
*{
margin: 0;
padding: 0;
}
header{
text-align: center;
background: #eee;
height: 3rem;
line-height: 3rem;
margin: 2rem;
}
table{
width: 90%;
margin: auto;
border-collapse: collapse;
text-align: center;
}
caption{
margin: 1rem;
}
table,th,td{
border: 2px solid black;
}
table tr:first-child{
background-color: #0ee;
}
td{
padding: 1rem;
}
a{
text-decoration-line: none;
color: blue;
}
a:hover{
color: red;
}
ul{
margin-top: 1rem;
text-align: center;
}
li {
display: inline;
padding: 0.5rem;
background: #aaf;
border: 2px solid blue;
border-radius: 4px;
list-style-type: none;
}
li:nth-child(2){
background: green;
}
.more{
border: none;
background: #fff;
}
</style>
</main>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3、分类管理
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>分类管理</title>
</head>
<body>
<header>
分类管理
</header>
<main>
<table>
<caption>分类管理</caption>
<tr>
<td>编号</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>禁用</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>
<ul>
<li ><a href="">首页</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li class="more"> <a href="">...</a></li>
<li><a href="">尾页</a></li>
</ul>
<style>
*{
margin: 0;
padding: 0;
}
header{
text-align: center;
background: #eee;
height: 3rem;
line-height: 3rem;
margin: 2rem;
}
table{
width: 90%;
margin: auto;
border-collapse: collapse;
text-align: center;
}
caption{
margin: 1rem;
}
table,th,td{
border: 2px solid black;
}
table tr:first-child{
background-color: #0ee;
}
td{
padding: 1rem;
}
a{
text-decoration-line: none;
color: blue;
}
a:hover{
color: red;
}
ul{
margin-top: 1rem;
text-align: center;
}
li {
display: inline;
padding: 0.5rem;
border: 2px solid blue;
border-radius: 4px;
list-style-type: none;
}
li:nth-child(2){
background: green;
}
.more{
border: none;
background: #fff;
}
</style>
</main>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三、手抄作业：
