search

博客列表 >iframed的一个后台小案例

iframed的一个后台小案例

白鸽
白鸽原创
2022年10月20日 18:18:08385浏览

iframed的一个后台小案例

案例

default.html

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>管理后台</title>
  8.     <style>
  9.         body{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         #top{
  14.             background:#FFC;
  15.             margin: 0;
  16.             padding: 0;
  17.             width: 100%;
  18.             height: 50px;
  19.             border-bottom: 1px solid #003300;
  20.             line-height: 50px;
  21.             font: 1em sans-serif;
  22.         }
  23.         .h1{
  24.             margin: 0;
  25.             padding: 0;
  26.             float: left;
  27.             line-height: 50px;
  28.         }
  29.         .topright{
  30.             line-height: 50px;
  31.             float:right;
  32.         }
  33.         .topright a{
  34.             color: darkred;
  35.         }
  36.         #left{
  37.             background-color: darkseagreen;
  38.             float: left;
  39.             width: 200px;
  40.             height: 100%;
  41.         }
  42.         #left ul{
  43.             list-style-type: none;
  44.         }
  45.         #left li{
  46.             height: 30px;
  47.             line-height: 30px;;
  48.         }
  49.         #right{
  50.             float: left;
  51.             width: auto;
  52.             height: 100%;
  53.         }
  56.     </style>
  57. </head>
  58. <body>
  59.     <div id="top"><h1 class="h1">网站内容管理系统后台</h1>
  60.     <div class="topright">管理员：admin&nbsp;&nbsp;&nbsp;&nbsp;[<a href="#">安全退出]</a></div>
  61.     </div>
  62.     <div id="left">
  63.         <ul>
  64.         <li><a href="main.html" target="main">管理首页</a></li>
  65.         <li>菜单列表</li>
  66.         <li>菜单列表</li>
  67.         <li>菜单列表</li>
  68.         <li>菜单列表</li>
  69.         <li>菜单列表</li>
  70.         <li>菜单列表</li>
  71.         <li>菜单列表</li>
  72.     </ul></div>
  73.     <div id="right"><iframe name="main" src="table.html" width="1000" height="800"></iframe></div>
  74. </body>
  75. </html>

main.html

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>管理后台首页</title>
  8. </head>
  9. <body>
  10.     <h1>当前进入了管理后台首页</h1>
  11. </body>
  12. </html>
上一条：表单: 前后端数据交互的接口下一条：iframe小案例:实现CSS标签,属性选择器, 以及群组选择器的使用场景
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多