![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
文档管理 代码：
<!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>
<td>点击</td>
<td>发布人</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td><input type="checkbox" name="Choice" value=""></td>
<td>青衫磊落险峰行</td>
<td>天龙八部</td>
<td>2018-08-25</td>
<td>976</td>
<td>admin</td>
<td>
<a href="">修改</a> | <a href="">删除</a> | <a href="">预览</a>
</td>
</tr>
<tr>
<td>2</td>
<td><input type="checkbox" name="Choice" value=""></td>
<td>玉壁月华明</td>
<td>天龙八部</td>
<td>2018-08-25</td>
<td>856</td>
<td>admin</td>
<td>
<a href="">修改</a> | <a href="">删除</a> | <a href="">预览</a>
</td>
</tr>
<tr>
<td>1</td>
<td><input type="checkbox" name="Choice" value=""></td>
<td>青衫磊落险峰行</td>
<td>天龙八部</td>
<td>2018-08-25</td>
<td>976</td>
<td>admin</td>
<td>
<a href="">修改</a> | <a href="">删除</a> | <a href="">预览</a>
</td>
</tr>
<tr>
<td>3</td>
<td><input type="checkbox" name="Choice" value=""></td>
<td>马疾香幽</td>
<td>天龙八部</td>
<td>2018-08-25</td>
<td>952</td>
<td>admin</td>
<td>
<a href="">修改</a> | <a href="">删除</a> | <a href="">预览</a>
</td>
</tr>
<tr>
<td>4</td>
<td><input type="checkbox" name="Choice" value=""></td>
<td>燕云十八飞骑 奔腾如虎风烟举</td>
<td>天龙八部</td>
<td>2018-08-25</td>
<td>3976</td>
<td>admin</td>
<td>
<a href="">修改</a> | <a href="">删除</a> | <a href="">预览</a>
</td>
</tr>
<tr>
<td>5</td>
<td><input type="checkbox" name="Choice" value=""></td>
<td>九阴真经</td>
<td>射雕英雄传</td>
<td>2018-08-25</td>
<td>50076</td>
<td>admin</td>
<td>
<a href="">修改</a> | <a href="">删除</a> | <a href="">预览</a>
</td>
</tr>
<tr>
<td>6</td>
<td><input type="checkbox" name="Choice" value=""></td>
<td>铁血丹心</td>
<td>射雕英雄传</td>
<td>2018-08-25</td>
<td>1576</td>
<td>admin</td>
<td>
<a href="">修改</a> | <a href="">删除</a> | <a href="">预览</a>
</td>
</tr>
<tr>
<td>7</td>
<td><input type="checkbox" name="Choice" value=""></td>
<td>南帝北丐</td>
<td>射雕英雄传</td>
<td>2018-08-25</td>
<td>2356</td>
<td>admin</td>
<td>
<a href="">修改</a> | <a href="">删除</a> | <a href="">预览</a>
</td>
</tr>
<tr>
<td>8</td>
<td><input type="checkbox" name="Choice" value=""></td>
<td>华山论剑</td>
<td>射雕英雄传</td>
<td>2018-08-25</td>
<td>8576</td>
<td>admin</td>
<td>
<a href="">修改</a> | <a href="">删除</a> | <a href="">预览</a>
</td>
</tr>
</table>
<section>
<a href="">全选</a>
<a href="">取消</a>
<a href="">
<select name="cars">
<option value="推荐">推荐</option>
<option value="删除">删除</option>
<option value="移动">移动</option>
</select>
</a>
</section>
<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 #000;
}
table{
widows: 650px;
margin: auto;
border-collapse: collapse;
text-align: center;
}
td{
padding: 10px;
}
tr:first-child{
background: navajowhite;
}
a{
text-decoration-line: none;
color: #0085FF;
}
a:hover{
text-decoration-line: underline;
color: pink;
}
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;
line-height: 24px;
border: 1px solid #0085FF;
}
p a.active{
background-color: lightseagreen;
color: #fff;
}
.more{
border: none;
}
section{
text-align: center;
width: 100%;
height: 60px;
line-height: 60px;
}
section a{
padding: 5px 10px;
background-color: lightseagreen;
color: #fff;
border-radius: 8px;
}
</style>点击 "运行实例" 按钮查看在线实例
运行图：
分类管理 代码：
<!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>天龙八部</td>
<td>文章</td>
<td>1796</td>
<td>
<a href="">修改</a> | <a href="">删除</a> | <a href="">预览</a>
</td>
</tr>
<tr>
<td>2</td>
<td>神雕侠侣</td>
<td>文章</td>
<td>556</td>
<td>
<a href="">修改</a> | <a href="">删除</a> | <a href="">预览</a>
</td>
</tr>
<tr>
<td>1</td>
<td>雪山飞狐</td>
<td>文章</td>
<td>476</td>
<td>
<a href="">修改</a> | <a href="">删除</a> | <a href="">预览</a>
</td>
</tr>
<tr>
<td>3</td>
<td>烟台红富士</td>
<td>产品</td>
<td>952</td>
<td>
<a href="">修改</a> | <a href="">删除</a> | <a href="">预览</a>
</td>
</tr>
<tr>
<td>4</td>
<td>水晶葡萄</td>
<td>产品</td>
<td>3976</td>
<td>
<a href="">修改</a> | <a href="">删除</a> | <a href="">预览</a>
</td>
</tr>
<tr>
<td>5</td>
<td>公司简介</td>
<td>单页</td>
<td>-</td>
<td>
<a href="">修改</a> | <a href="">删除</a> | <a href="">预览</a>
</td>
</tr>
<tr>
<td>6</td>
<td>世界瞬间</td>
<td>图集</td>
<td>17576</td>
<td>
<a href="">修改</a> | <a href="">删除</a> | <a href="">预览</a>
</td>
</tr>
<tr>
<td>7</td>
<td>街头跟拍</td>
<td>视频</td>
<td>2356</td>
<td>
<a href="">修改</a> | <a href="">删除</a> | <a href="">预览</a>
</td>
</tr>
</table>
</body>
</html>
<style>
table,td{
border: 1px solid #000;
}
table{
widows: 650px;
margin: auto;
border-collapse: collapse;
text-align: center;
}
td{
padding: 10px;
}
tr:first-child{
background: navajowhite;
}
a{
text-decoration-line: none;
color: #0085FF;
}
a:hover{
text-decoration-line: underline;
color: pink;
}
p{
text-align: center;
}
</style>点击 "运行实例" 按钮查看在线实例
运行图：
产品管理 代码：
<!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>
<td>基本参数</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td><h2>vivo</h2></td>
<td>NEX旗舰版</td>
<td><b>￥4498</b></td>
<td><img src="https://2a.zol-img.com.cn/product/191_220x165/566/ceRo14zJK4flI.jpg" alt="" width="100"></td>
<td>
<ul>
<li>核心数：八核</li>
<li>内存：8GB</li>
<li>主屏尺寸：6.59英寸</li>
<li>电池容量：4000mAh</li>
<li>后置摄像头：主摄2x1200万像素</li>
<li>前置摄像头：800万像素</li>
</ul>
</td>
<td>
<a href="">修改</a> | <a href="">删除</a> | <a href="">预览</a>
</td>
</tr>
<tr>
<td>2</td>
<td><h2>华为</h2></td>
<td>Mate RS</td>
<td><b>￥9999</b></td>
<td><img src="https://2c.zol-img.com.cn/product/190_320x240/464/cek9voqaVYpeg.jpg" alt="" width="100"></td>
<td>
<ul>
<li>核心数：八核</li>
<li>内存：6GB</li>
<li>主屏尺寸：6英寸</li>
<li>电池容量：4000mAh</li>
<li>后置摄像头：彩色4000万像素+黑白2000万像素</li>
<li>前置摄像头：2400万像素</li>
</ul>
</td>
<td>
<a href="">修改</a> | <a href="">删除</a> | <a href="">预览</a>
</td>
</tr>
<tr>
<td>3</td>
<td><h2>魅族</h2></td>
<td>16 Plus</td>
<td><b>￥3498</b></td>
<td><img src="https://2c.zol-img.com.cn/product/192_220x165/334/ceRtdl8nJsFw.jpg" alt="" width="100"></td>
<td>
<ul>
<li>核心数：八核</li>
<li>内存：8GB</li>
<li>主屏尺寸：6.5英寸</li>
<li>电池容量：3640mAh</li>
<li>后置摄像头：2000万像素+1200万像素</li>
<li>前置摄像头：2000万像素</li>
</ul>
</td>
<td>
<a href="">修改</a> | <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 type="text/css">
table,td{
border: 1px solid #000;
}
table{
widows: 650px;
margin: auto;
border-collapse: collapse;
text-align: center;
}
td{
padding: 10px;
}
tr:first-child{
background: navajowhite;
}
a{
text-decoration-line: none;
color: #0085FF;
}
a:hover{
text-decoration-line: underline;
color: pink;
}
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;
line-height: 24px;
border: 1px solid #0085FF;
}
p a.active{
background-color: lightseagreen;
color: #fff;
}
.more{
border: none;
}
table tr td img {padding:5px;border-radius:10px;}
ul li{list-style: none;font-size: 14px;color: #666;}
</style>点击 "运行实例" 按钮查看在线实例
运行图：
