效果图:
admin.html代码:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3月20日作业-网站后台管理系统</title> </head> <body> <table align="center" border="0" cellspacing="0" cellpadding="5" width="960"> <!-- top --> <tr> <td colspan="2"> <iframe src="inc/top.html" name="top" align="center" width="100%" height="60" frameborder="0" scrolling="no"></iframe> </td> </tr> <!-- 分隔线 --> <tr> <td colspan="2"><hr></td> </tr> <!-- body --> <tr> <!-- left --> <td> <iframe src="inc/left.html" name="left" frameborder="0" width="160" height="600" align="center" scrolling="no"></iframe> </td> <!-- right --> <td> <iframe src="inc/default.html" name="right" frameborder="0" width="780" height="600" align="center" scrolling="no"></iframe> </td> </tr> <!-- 下分隔线 --> <tr> <td colspan="2"><hr></td> </tr> <!-- 底部footer --> <tr> <td colspan="2"> <iframe src="inc/footer.html" name="footer" height="70" width="100%" align="center" frameborder="0" scrolling="no"></iframe> </td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
left.html代码:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>left</title> </head> <body> <h4><img src="../images/user1.jpg" width="30">用户管理</h4> <ul type="none"> <li><a href="user.html" target="right"><img src="../images/serch.jpg" width="20">用户查询</a></li> <li><a href=""><img src="../images/serch.jpg" width="20">分类管理</a></li> </ul> <hr> <h4><img src="../images/sp.jpg" width="30">商品管理</h4> <ul type="none"> <li><a href="goods.html" target="right"><img src="../images/serch.jpg" width="20">商品查询</a></li> <li><a href=""><img src="../images/serch.jpg" width="20">分类管理</a></li> </ul> <hr> <h4><img src="../images/order.jpg" width="30">订单管理</h4> <ul type="none"> <li><a href="order.html" target="right"><img src="../images/serch.jpg" width="20">订单查询</a></li> <li><a href=""><img src="../images/serch.jpg" width="20">分类管理</a></li> </ul> <hr> <h4><img src="../images/system.jpg" width="30">系统管理</h4> <ul type="none"> <li><a href="system.html" target="right"><img src="../images/config.jpg" width="20">基本配置</a></li> <li><a href=""><img src="../images/config.jpg" width="20">高级管理</a></li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
top.html
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>top</title> </head> <body> <table> <!-- logo --> <tr > <td height="60" width="60"> <img src="../images/logo.jpg" width="40" height="35"> </td> <td width="700"> <h2>网上商城后台管理系统</h2> </td> <td width="200" align="right" valign="botoom"> <a href="">admin</a> <a href="">退出</a> </td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
footer.html代码:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>footer</title> </head> <body> <p align="center"> <a href="">PHP中文网(http://www.php.cn)在线商城</a> ©版权所有 备案号:皖ICP-2018032100110022 </p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码: