代码：index.html
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>0320-做一个简单后台页面</title> </head> <body> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td colspan="2" height="60"> <iframe src="head.html" name="top" width="100%" height="100" scrolling="no" frameborder="0"></iframe> </td> </tr> <tr><td colspan="2"><hr></td></tr> <tr> <td width="20%"> <iframe src="left.html" name="left" width="100%" height="480" scrolling="no" frameborder="0"></iframe> </td> <td width="80%"> <iframe src="default.html" name="right" width="100%" height="480" scrolling="no" frameborder="0"></iframe> </td> </tr> <tr> <td colspan="2"> <iframe src="footer.html" name="buttom" width="100%" height="80" scrolling="no" frameborder="0"></iframe> </td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
head.html
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>header</title> </head> <body> <table align="center" border="0" cellpadding="5" cellspacing="0"> <tr> <td width="15%" align="left"><img src="images/logo.jpg" height="60"></td> <td width="25%" align="left"><h1>后台控制面板</h1></td> <td align="right" width="60%"> <a href="">交流论坛</a> <a href="">捐赠资助</a> <a href="">admin</a> </td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
left.html
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>left</title> </head> <body> <h4>系统设置</h4> <ul type="none"> <li><a href="default.html" target="right">系统信息</a></li> <li>登陆日志</li> </ul> <hr> <h4>服务列表</h4> <ul type="none"> <li><a href="site.html" target="right">站点列表</a></li> <li>登陆日志</li> </ul> <hr> <h4>用户管理</h4> <ul type="none"> <li><a href="">用户列表</a></li> <li>登陆日志</li> </ul> <hr> <h4>系统操作</h4> <ul type="none"> <li>退出登陆</li> <li>重启服务</li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
default.html
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>系统信息</title> </head> <body> <fieldset> <legend>快捷操作</legend> <a href="default.html" target="right">系统信息</a> | <a href="site.html" target="right">站点列表</a> | <a href="user.html" target="right">用户列表</a> | <a href="">操作日志</a> | <a href="">操作日志</a> | <a href="">操作日志</a> | <a href="">操作日志</a> | <a href="">操作日志</a> | <a href="">操作日志</a> </fieldset> <fieldset> <legend>系统信息</legend> <p>系统名称： JBlinux Control Panel </p> <p>当前版本: JBCP v3.2.21 最新 v3.2.21 更新日志</p> <p>操作系统： 3.10.0-514.26.2.el7.x86_64</p> <p>主 机 名： XZb0lgjurnbwg6fZ</p> <p>CPU参数： 1个 8核 64位</p> <p>CPU型号： Intel(R) Xeon(R) CPU E5-2682 v4 @ 2.50GHz</p> <p>系统时间： 2018-03-20 22:20:15 CST</p> <p>服务器IP： 223.179.160.202,118.190.160.125</p> <p>内存使用： 总: 15.51 GB 已用: 755.68 MB 剩余: 14.78 GB</p> </fieldset> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
footer.html
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>footer</title> </head> <body> <table align="center"> <tr><td></td><hr></tr> <tr> <td>JB控制面板 ©2014-2018 版权所有</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
site.html
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表1</title> </head> <body> <fieldset> <legend>快捷操作</legend> <a href="default.html" target="right">系统信息</a> | <a href="site.html" target="right">站点列表</a> | <a href="user.html" target="right">用户列表</a> | <a href="">操作日志</a> | <a href="">操作日志</a> | <a href="">操作日志</a> | <a href="">操作日志</a> | <a href="">操作日志</a> | <a href="">操作日志</a> </fieldset> <table align="center" border="1" cellspacing="0" cellpadding="5"> <caption><h3>站点列表</h3></caption> <tr> <th width="60">id</th> <th width="60">站名</th> <th width="120">域名</th> <th width="60">空间</th> <th width="120">操作</th> </tr> <tr align="center"> <td>1</td> <td>a站</td> <td>aaa.com</td> <td>40G</td> <td> <a href=""><img src="images/edit.jpg" width="40" alt="编辑"></a> <a href=""><img src="images/del.jpg" width="40" alt="删除"></a> </td> </tr> <tr align="center"> <td>2</td> <td>b站</td> <td>bbb.com</td> <td>80G</td> <td> <a href=""><img src="images/edit.jpg" width="40" alt="编辑"></a> <a href=""><img src="images/del.jpg" width="40" alt="删除"></a> </td> </tr> <tr align="center"> <td>3</td> <td>c站</td> <td>ccc.com</td> <td>40G</td> <td> <a href=""><img src="images/edit.jpg" width="40" alt="编辑"></a> <a href=""><img src="images/del.jpg" width="40" alt="删除"></a> </td> </tr> <tr align="center"> <td>4</td> <td>d站</td> <td>ddd.com</td> <td>90G</td> <td> <a href=""><img src="images/edit.jpg" width="40" alt="编辑"></a> <a href=""><img src="images/del.jpg" width="40" alt="删除"></a> </td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码：
整体效果：
