实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>默认后台首页</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" align="center">
<caption><h3>系统配置信息表</h3></caption>
<tr>
<th width="160" bgcolor="lightblue">服务器</th>
<td width="400">Apache 2.8.1</td>
</tr>
<tr>
<th bgcolor="lightblue">PHP版本</th>
<td>PHP5.6+</td>
</tr>
<tr>
<th bgcolor="lightblue">数据库</th>
<td>MySQL 5.7</td>
</tr>
<tr>
<th bgcolor="lightblue">可用磁盘空间</th>
<td>395G</td>
</tr>
<tr>
<th bgcolor="lightblue">可用内存</th>
<td>3.2G</td>
</tr>
</table>
</body>
</html>
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品管理</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" align="center" width="80%">
<caption><h3>商品管理<small><a href="">添加</a></small></h3></caption>
<thead>
<!-- bgcolor可以设置行或单元格的背景颜色 -->
<tr bgcolor="lightcyan">
<!-- <th>标签内部文本默认会加粗居中显示,非常适合做表头 -->
<th>ID</th>
<th>名称</th>
<th>缩略图</th>
<th>价格</th>
<th>状态</th>
<th>添加时间</th>
<th colspan="2">操作</th>
</tr>
<tr align="center">
<td>01</td>
<td align="left">眼霜</td>
<td><img src="../images/ys.jpg" width="30"></td>
<td>1399</td>
<td>正常</td>
<td>2017-09-01</td>
<td>
<a href=""><img src="../images/edit.jpg" width="30" alt="编辑" title="编辑"></a>
<a href=""><img src="../images/del.jpg" width="30" alt="删除" title="删除"></a>
</td>
</tr>
<tr align="center">
<td>02</td>
<td align="left">防晒箱</td>
<td><img src="../images/sh.jpg" width="30"></td>
<td>3999</td>
<td>下架</td>
<td>2017-12-11</td>
<td>
<a href=""><img src="../images/edit.jpg" width="30" alt="编辑" title="编辑"></a>
<a href=""><img src="../images/del.jpg" width="30" alt="删除" title="删除"></a>
</td>
</tr>
<tr align="center">
<td>03</td>
<td align="left">保温杯</td>
<td><img src="../images/bb.jpg" width="30"></td>
<td>7890</td>
<td>正常</td>
<td>2018-01-01</td>
<td>
<a href=""><img src="../images/edit.jpg" width="30" alt="编辑" title="编辑"></a>
<a href=""><img src="../images/del.jpg" width="30" alt="删除" title="删除"></a>
</td>
</tr>
<tr align="center">
<td>04</td>
<td align="left">拉杆箱</td>
<td><img src="../images/lx.jpg" width="30"></td>
<td>18999</td>
<td>正常</td>
<td>2017-02-01</td>
<td>
<a href=""><img src="../images/edit.jpg" width="30" alt="编辑" title="编辑"></a>
<a href=""><img src="../images/del.jpg" width="30" alt="删除" title="删除"></a>
</td>
</tr>
<tr align="center">
<td>05</td>
<td align="left">耳机</td>
<td><img src="../images/ej.jpg" width="30"></td>
<td>2850</td>
<td>正常</td>
<td>2018-01-21</td>
<td>
<a href=""><img src="../images/edit.jpg" width="30" alt="编辑" title="编辑"></a>
<a href=""><img src="../images/del.jpg" width="30" alt="删除" 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>
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>footer</title>
</head>
<body>
<p align="center">
<a href="">PHP中文网(www.php.cn)在线商城 </a> ©版权所有
<a href="">备案号:皖ICP-*******</a>
</p>
</body>
</html>
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left</title>
</head>
<body>
<h4><img src="../images/user.jpg" width="30">用户管理</h4>
<ul type="none">
<!-- a标签的target属性值设置为要访问的框架的name名即可,这里是在右侧显示:right -->
<li><img src="../images/file.jpg" width="20"><a href="user.html" target="right">用户查询</a></li>
<li><img src="../images/file.jpg" width="20"><a href="">分类管理</a></li>
</ul>
<hr>
<h4><img src="../images/folder.jpg" width="30">商品管理</h4>
<ul type="none">
<li><img src="../images/file.jpg" width="20"><a href="foods.html" target="right">商品查询</a></li>
<li><img src="../images/file.jpg" width="20"><a href="">分类管理</a></li>
</ul>
<hr>
<h4><img src="../images/folder.jpg" width="30">订单管理</h4>
<ul type="none">
<li><img src="../images/file.jpg" width="20"><a href="order.html" target="right">订单查询</a></li>
<li><img src="../images/file.jpg" width="20"><a href="">分类管理</a></li>
</ul>
<hr>
<h4><img src="../images/set.jpg" width="20">系统设置</h4>
<ul type="none">
<li><img src="../images/file.jpg" width="20"><a href="system.html" target="right">基本配置</a></li>
<li><img src="../images/file.jpg" width="20"><a href="">高级配置</a></li>
</ul>
</body>
</html>
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>订单管理</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" align="center" width="80%">
<caption><h3>订单管理<small><a href="">添加</a></small></h3></caption>
<thead>
<!-- bgcolor可以设置行或单元格的背景颜色 -->
<tr bgcolor="lightcyan">
<!-- <th>标签内部文本默认会加粗居中显示,非常适合做表头 -->
<th>订单号</th>
<th>商品名称</th>
<th>缩略图</th>
<th>价格</th>
<th>状态</th>
<th>订购时间</th>
<th colspan="2">操作</th>
</tr>
<tr align="center">
<td>01</td>
<td align="left">眼霜</td>
<td><img src="../images/ys.jpg" width="30"></td>
<td>1399</td>
<td>有货</td>
<td>2017-08-11</td>
<td>
<a href=""><img src="../images/edit.jpg" width="30" alt="编辑" title="编辑"></a>
<a href=""><img src="../images/del.jpg" width="30" alt="删除" title="删除"></a>
</td>
</tr>
<tr align="center">
<td>02</td>
<td align="left">防晒箱</td>
<td><img src="../images/sh.jpg" width="30"></td>
<td>3999</td>
<td>有货</td>
<td>2017-10-01</td>
<td>
<a href=""><img src="../images/edit.jpg" width="30" alt="编辑" title="编辑"></a>
<a href=""><img src="../images/del.jpg" width="30" alt="删除" title="删除"></a>
</td>
</tr>
<tr align="center">
<td>03</td>
<td align="left">保温杯</td>
<td><img src="../images/bb.jpg" width="30"></td>
<td>7890</td>
<td>有货</td>
<td>2018-01-21</td>
<td>
<a href=""><img src="../images/edit.jpg" width="30" alt="编辑" title="编辑"></a>
<a href=""><img src="../images/del.jpg" width="30" alt="删除" title="删除"></a>
</td>
</tr>
<tr align="center">
<td>04</td>
<td align="left">拉杆箱</td>
<td><img src="../images/lx.jpg" width="30"></td>
<td>18999</td>
<td>无货</td>
<td>2017-06-03</td>
<td>
<a href=""><img src="../images/edit.jpg" width="30" alt="编辑" title="编辑"></a>
<a href=""><img src="../images/del.jpg" width="30" alt="删除" title="删除"></a>
</td>
</tr>
<tr align="center">
<td>05</td>
<td align="left">耳机</td>
<td><img src="../images/ej.jpg" width="30"></td>
<td>2850</td>
<td>有货</td>
<td>2018-03-11</td>
<td>
<a href=""><img src="../images/edit.jpg" width="30" alt="编辑" title="编辑"></a>
<a href=""><img src="../images/del.jpg" width="30" alt="删除" 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>
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>系统设置</title>
</head>
<body>
<!-- 复用一个default.html页面代码 -->
<table border="0" cellspacing="0" cellpadding="5" align="center">
<caption>
<h3>系统配置信息表</h3>
<hr width="80%">
</caption>
<tr>
<td width="160" align="right"><label for="title">网站标题:</label></td>
<td width="400" align="left"><input type="text" id="title" name="title" value="" placeholder="不多于28个字符" size="50"></td>
</tr>
<tr>
<td align="right"><label for="keywords">网站关键字:</label></td>
<td align="left"><input type="text" id="keywords" name="keywords" value="" placeholder="不多于40个字符" size="50"></td>
</tr>
<tr>
<td valign="middle" align="right"><label for="desc">网站描述:</label></td>
<td align="left"><textarea id="desc" name="desc" rows="5" cols="50" placeholder="不多于120个字符"></textarea></td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="image" name="submit" src="../images/submit.jpg" width="90">
</td>
</tr>
</table>
</body>
</html>
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>top</title>
</head>
<body>
<table border="0">
<tr>
<td valign="middle"><img src="../images/logo.jpg" width="40"></td>
<td width="650" valign="middel"><h2 align="left">在线商城后台管理系统</h2></td>
<td align="right" valign="bottom"><p><a href="">admin</a> <a href="">退出</a></p></td>
</tr>
</table>
</body>
</html>
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户管理</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" align="center" width="80%">
<caption><h3>用户管理<small><a href="">添加</a></small></h3></caption>
<thead>
<!-- bgcolor可以设置行或单元格的背景颜色 -->
<tr bgcolor="lightcyan">
<!-- <th>标签内部文本默认会加粗居中显示,非常适合做表头 -->
<th>ID</th>
<th>用户名</th>
<th>头像</th>
<th>邮箱</th>
<th>状态</th>
<th>注册时间</th>
<th colspan="2">操作</th>
</tr>
<tr align="center">
<td>01</td>
<td align="left">纯咪</td>
<td><img src="../images/1.jpg" width="30"></td>
<td>aaa@php.cn</td>
<td>启用</td>
<td>2017-09-01</td>
<td>
<a href=""><img src="../images/edit.jpg" width="30" alt="编辑" title="编辑"></a>
<a href=""><img src="../images/del.jpg" width="30" alt="删除" title="删除"></a>
</td>
</tr>
<tr align="center">
<td>02</td>
<td align="left">笑笑</td>
<td><img src="../images/2.jpg" width="30"></td>
<td>bbb@php.cn</td>
<td>启用</td>
<td>2017-12-11</td>
<td>
<a href=""><img src="../images/edit.jpg" width="30" alt="编辑" title="编辑"></a>
<a href=""><img src="../images/del.jpg" width="30" alt="删除" title="删除"></a>
</td>
</tr>
<tr align="center">
<td>03</td>
<td align="left">爽妞</td>
<td><img src="../images/3.jpg" width="30"></td>
<td>ccc@php.cn</td>
<td>禁用</td>
<td>2018-01-01</td>
<td>
<a href=""><img src="../images/edit.jpg" width="30" alt="编辑" title="编辑"></a>
<a href=""><img src="../images/del.jpg" width="30" alt="删除" title="删除"></a>
</td>
</tr>
<tr align="center">
<td>04</td>
<td align="left">小妞</td>
<td><img src="../images/4.jpg" width="30"></td>
<td>ddd@php.cn</td>
<td>启用</td>
<td>2017-02-01</td>
<td>
<a href=""><img src="../images/edit.jpg" width="30" alt="编辑" title="编辑"></a>
<a href=""><img src="../images/del.jpg" width="30" alt="删除" title="删除"></a>
</td>
</tr>
<tr align="center">
<td>05</td>
<td align="left">妞咪</td>
<td><img src="../images/5.jpg" width="30"></td>
<td>eee@php.cn</td>
<td>启用</td>
<td>2016-10-21</td>
<td>
<a href=""><img src="../images/edit.jpg" width="30" alt="编辑" title="编辑"></a>
<a href=""><img src="../images/del.jpg" width="30" alt="删除" 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>
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP中文网商城后台管理系统</title>
</head>
<body>
<!-- 后台分为上下二部分,其中下部再分为左右二部分,左边显示菜单,右边是对应的内容 -->
<table border="0" cellspacing="1" cellpadding="5" align="center" width="960">
<!-- 顶部 -->
<tr height=60>
<td colspan="2">
<iframe src="inc/top.html" name="top" height="70" width="100%" frameborder="0" align="center" scrolling="no"></iframe>
</td>
</tr>
<!-- 我是一条风骚的分隔线 -->
<tr><td width="100%" colspan="2"><hr></td></tr>
<!-- 中间主体:分左右二栏 -->
<tr>
<!-- 左边菜单栏 -->
<td>
<iframe src="inc/left.html" name="left" height="600" width="140" frameborder="0" align="center" scrolling="no"></iframe>
</td>
<!-- 右边内容区 -->
<td>
<iframe src="inc/default.html" name="right" height="600" width="800" frameborder="0" align="left" scrolling="no"></iframe>
</td>
</tr>
<!-- 我是一条风骚的分隔线 -->
<tr><td width="100%" colspan="2"><hr></td></tr>
<!-- 底部 -->
<tr>
<td colspan="2">
<iframe src="inc/footer.html" name="footer" height="70" width="100%" frameborder="0" align="center"></iframe>
</td>
</tr>
</table>
</body>
</html>
点击 "运行实例" 按钮查看在线实例
Correction status：qualified
Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
