四 实战后台网站管理 (下)
完善左侧菜单各个子类
修改第2章明星top50表格，用于实现用户查询代码
要实现点击用户查询，在右侧显示user.html的内容需要修改这里
此时执行admin.html,点击用户查询就能正常显示user.html的内容
最终修改完成的user.htlm代码：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>用户管理</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5" align="center" width="80%"> <caption><h3>用户管理 <a href="">添加</a></h3></caption> <thead> <tr align="center" bgcolor="lightcyan"> <!-- <th>标签内部文本默认会加粗居中显示,非常适合做表头 --> <th>ID</th> <th>用户名</th> <th>头像</th> <th>邮箱</th> <th>状态</th> <th>注册时间</th> <th>操作</th> </tr> </thead> <tbody> <tr align="center" > <td>01</td> <td>高圆圆</td> <td align="center"><img src="../image/高圆圆.jpg" alt="4.实战后台网站管理 (下)" width="30"></td> <td>222@163.com</td> <td>启用</td> <td>2023-03-08</td> <td colspan="2"> <a href=""><img src="../image/edit.jpg" alt="4.实战后台网站管理 (下)" width="20" title="编辑"></a> <a href=""><img src="../image/del.jpg" alt="4.实战后台网站管理 (下)" width="20" title="删除"></a> </td> </tr> <tr align="center" > <td>02</td> <td>赵丽颖</td> <td align="center"><img src="../image/赵丽颖.jpg" alt="4.实战后台网站管理 (下)" width="30"></td> <td>34bjb@163.com</td> <td>启用</td> <td>2023-03-11</td> <td colspan="2"> <a href=""><img src="../image/edit.jpg" alt="4.实战后台网站管理 (下)" width="20" title="编辑"></a> <a href=""><img src="../image/del.jpg" alt="4.实战后台网站管理 (下)" width="20" title="删除"></a> </td> </tr> <tr align="center" > <td>03</td> <td>迪丽热巴</td> <td align="center"><img src="../image/迪丽热巴.jpg" alt="4.实战后台网站管理 (下)" width="30"></td> <td>2dsfjkb@163.com</td> <td>启用</td> <td>2023-04-14</td> <td colspan="2"> <a href=""><img src="../image/edit.jpg" alt="4.实战后台网站管理 (下)" width="20" title="编辑"></a> <a href=""><img src="../image/del.jpg" alt="4.实战后台网站管理 (下)" width="20" title="删除"></a> </td> </tr> <tr align="center" > <td>04</td> <td>古力娜扎</td> <td align="center"><img src="../image/古力娜扎.jpg" alt="4.实战后台网站管理 (下)" width="30"></td> <td>2vdv@163.com</td> <td>启用</td> <td>2023-01-15</td> <td colspan="2"> <a href=""><img src="../image/edit.jpg" alt="4.实战后台网站管理 (下)" width="20" title="编辑"></a> <a href=""><img src="../image/del.jpg" alt="4.实战后台网站管理 (下)" width="20" title="删除"></a> </td> </tr> <tr align="center" > <td>05</td> <td>毛晓彤</td> <td align="center"><img src="../image/毛晓彤.jpg" alt="4.实战后台网站管理 (下)" width="30"></td> <td>22dss2@163.com</td> <td>启用</td> <td>2023-06-08</td> <td colspan="2"> <a href=""><img src="../image/edit.jpg" alt="4.实战后台网站管理 (下)" width="20" title="编辑"></a> <a href=""><img src="../image/del.jpg" alt="4.实战后台网站管理 (下)" width="20" title="删除"></a> </td> </tr> </tbody> </table> <!-- 添加分页--> <p align="center"> <a href="">首页</a> <a href="">上一页</a> <a href="">1</a> <a href="">2</a> <a href="">3</a> <a href="">...</a> <a href="">下一页</a> <a href="">最后一页</a> </p> </body> </html>
执行admin.html点击用户管理：
完成了用户管理之后，其他的就好改了，
完成商品查询：
复制user.html的代码，粘贴到goods.html
然后修改，完整代码：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>商品管理</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5" align="center" width="80%"> <caption><h3>商品管理 <a href="">添加</a></h3></caption> <thead> <tr align="center" bgcolor="lightcyan"> <!-- <th>标签内部文本默认会加粗居中显示,非常适合做表头 --> <th>ID</th> <th>名称</th> <th>缩略图</th> <th>价格</th> <th>状态</th> <th>添加时间</th> <th>操作</th> </tr> </thead> <tbody> <tr align="center" > <td>01</td> <td>iphone X手机</td> <td align="center"><img src="../image/iphonex.jpg" alt="4.实战后台网站管理 (下)" width="30"></td> <td>3999</td> <td>正常</td> <td>2023-03-08</td> <td colspan="2"> <a href=""><img src="../image/edit.jpg" alt="4.实战后台网站管理 (下)" width="20" title="编辑"></a> <a href=""><img src="../image/del.jpg" alt="4.实战后台网站管理 (下)" width="20" title="删除"></a> </td> </tr> <tr align="center" > <td>02</td> <td>外星人笔记本</td> <td align="center"><img src="../image/et.jpg" alt="4.实战后台网站管理 (下)" width="30"></td> <td>7890</td> <td>正常</td> <td>2023-03-11</td> <td colspan="2"> <a href=""><img src="../image/edit.jpg" alt="4.实战后台网站管理 (下)" width="20" title="编辑"></a> <a href=""><img src="../image/del.jpg" alt="4.实战后台网站管理 (下)" width="20" title="删除"></a> </td> </tr> <tr align="center" > <td>03</td> <td>MacBook Pro</td> <td align="center"><img src="../image/macbook.jpg" alt="4.实战后台网站管理 (下)" width="30"></td> <td>18999</td> <td>下架</td> <td>2023-04-14</td> <td colspan="2"> <a href=""><img src="../image/edit.jpg" alt="4.实战后台网站管理 (下)" width="20" title="编辑"></a> <a href=""><img src="../image/del.jpg" alt="4.实战后台网站管理 (下)" width="20" title="删除"></a> </td> </tr> <tr align="center" > <td>04</td> <td>平板电视</td> <td align="center"><img src="../image/pbds.jpg" alt="4.实战后台网站管理 (下)" width="30"></td> <td>2850</td> <td>正常</td> <td>2023-01-15</td> <td colspan="2"> <a href=""><img src="../image/edit.jpg" alt="4.实战后台网站管理 (下)" width="20" title="编辑"></a> <a href=""><img src="../image/del.jpg" alt="4.实战后台网站管理 (下)" width="20" title="删除"></a> </td> </tr> </tbody> </table> <!-- 添加分页--> <p align="center"> <a href="">首页</a> <a href="">上一页</a> <a href="">1</a> <a href="">2</a> <a href="">3</a> <a href="">...</a> <a href="">下一页</a> <a href="">最后一页</a> </p> </body> </html>
修改left.html:
执行admin.html，点击商品查询
复制goods.html，新建order.html完成订单管理
修改后的order.html代码：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>订单管理</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5" align="center" width="80%"> <caption><h3>订单管理 <a href="">添加</a></h3></caption> <thead> <tr align="center" bgcolor="lightcyan"> <!-- <th>标签内部文本默认会加粗居中显示,非常适合做表头 --> <th>ID</th> <th>商品名称</th> <th>缩略图</th> <th>价格</th> <th>状态</th> <th>订购时间</th> <th>操作</th> </tr> </thead> <tbody> <tr align="center" > <td>01</td> <td>iphone X手机</td> <td align="center"><img src="../image/iphonex.jpg" alt="4.实战后台网站管理 (下)" width="30"></td> <td>3999</td> <td>有货</td> <td>2023-03-08</td> <td colspan="2"> <a href=""><img src="../image/edit.jpg" alt="4.实战后台网站管理 (下)" width="20" title="编辑"></a> <a href=""><img src="../image/del.jpg" alt="4.实战后台网站管理 (下)" width="20" title="删除"></a> </td> </tr> <tr align="center" > <td>02</td> <td>外星人笔记本</td> <td align="center"><img src="../image/et.jpg" alt="4.实战后台网站管理 (下)" width="30"></td> <td>7890</td> <td>有货</td> <td>2023-03-11</td> <td colspan="2"> <a href=""><img src="../image/edit.jpg" alt="4.实战后台网站管理 (下)" width="20" title="编辑"></a> <a href=""><img src="../image/del.jpg" alt="4.实战后台网站管理 (下)" width="20" title="删除"></a> </td> </tr> <tr align="center" > <td>03</td> <td>MacBook Pro</td> <td align="center"><img src="../image/macbook.jpg" alt="4.实战后台网站管理 (下)" width="30"></td> <td>18999</td> <td>无货</td> <td>2023-04-14</td> <td colspan="2"> <a href=""><img src="../image/edit.jpg" alt="4.实战后台网站管理 (下)" width="20" title="编辑"></a> <a href=""><img src="../image/del.jpg" alt="4.实战后台网站管理 (下)" width="20" title="删除"></a> </td> </tr> <tr align="center" > <td>04</td> <td>平板电视</td> <td align="center"><img src="../image/pbds.jpg" alt="4.实战后台网站管理 (下)" width="30"></td> <td>2850</td> <td>有货</td> <td>2023-01-15</td> <td colspan="2"> <a href=""><img src="../image/edit.jpg" alt="4.实战后台网站管理 (下)" width="20" title="编辑"></a> <a href=""><img src="../image/del.jpg" alt="4.实战后台网站管理 (下)" width="20" title="删除"></a> </td> </tr> </tbody> </table> <!-- 添加分页--> <p align="center"> <a href="">首页</a> <a href="">上一页</a> <a href="">1</a> <a href="">2</a> <a href="">3</a> <a href="">...</a> <a href="">下一页</a> <a href="">最后一页</a> </p> </body> </html>
修改left.html代码：
执行admin.html,点击订单查询
新建system.html完成基本配置项目：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>系统配置表</title> </head> <body> <table border="0" cellspacing="0" cellpadding="5" align="center"> <caption><h3>系统配置表</h3></caption> <tr> <td colspan="2"> <hr> </td> </tr> <tr> <td width="130" align="right">网站标题：</td> <td width="400" align="left"> <input type="text" name="title" id="title" placeholder="标题不超28个字"> </td> </tr> <tr> <td width="130" align="right">网站关键字：</td> <td width="400" align="left"> <input type="text" name="desc" id="desc" placeholder="不多于40个字符"> </td> </tr> <tr> <td width="130" align="right">网站描述：</td> <td width="400" align="left"> <textarea name="" id="" cols="30" rows="3" placeholder="不多于120个字符"></textarea> </td> </tr> <tr align="center"> <td colspan="2"> <input type="image" name="submit" src="../image/submit.jpg" alt="4.实战后台网站管理 (下)" width="50"> </td> </tr> </table> </body> </html>
本文作者为BUG之神，转载请注明。