ASCII码 ASCII码

利用iframe做一个简单的后台界面

发布于:2022-03-20 11:37:47  栏目:技术文档
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>iframe</title>
  6. </head>
  7. <style>
  8. body{
  9. padding:0px;
  10. margin:0px;
  11. font-family: "微软雅黑";
  12. }
  13. ul,li,a{
  14. list-style: none;
  15. text-decoration: none;
  16. margin:0;
  17. padding:0;
  18. }
  19. .header{
  20. height: 150px;
  21. background: #333;
  22. color: #fff;
  23. line-height: 150px;
  24. padding:0px 15px;
  25. }
  26. .header_ur{
  27. /*display:block;*/
  28. }
  29. .header_li span{
  30. font-size: 30px;
  31. font-weight: 800px;
  32. float: left;
  33. }
  34. .header_li_right{
  35. float: right;
  36. color:#fff;
  37. }
  38. .header_li_right a{
  39. color:#fff;
  40. margin:0px 10px;
  41. }
  42. .left{
  43. width:15%;
  44. background: #022;
  45. text-align: center;
  46. height: 820px;
  47. float: left;
  48. }
  49. .left ul li{
  50. padding:15px;
  51. }
  52. .left ul li a{
  53. color: #fff;
  54. }
  55. .right{
  56. float:right;
  57. width: 85%;
  58. background: #0f0;
  59. }
  60. .right iframe{
  61. height: 820px;
  62. width: 100%;
  63. }
  64. </style>
  65. <body>
  66. <div class="header">
  67. <ul class="header_ur">
  68. <li class="header_li">
  69. <span>后台管理</span>
  70. </li>
  71. <li class="header_li_right">
  72. <a href="">admin</a>
  73. <a href="">退出</a>
  74. </li>
  75. </ul>
  76. </div>
  77. <div class="left">
  78. <ul>
  79. <li>
  80. <a href="form.html" target='admin_right'>菜单1</a>
  81. </li>
  82. <li>
  83. <a href="image.html" target='admin_right'>菜单1</a>
  84. </li>
  85. <li>
  86. <a href="table.html" target='admin_right'>菜单1</a>
  87. </li>
  88. <li>
  89. <a href="index.html" target='admin_right'>菜单1</a>
  90. </li>
  91. </ul>
  92. </div>
  93. <div class="right">
  94. <iframe src="" frameborder="0" name='admin_right'></iframe>
  95. </div>
  96. </body>
  97. </html>

效果图

效果图

相关推荐
阅读 +