search

博客列表 >利用iframe做一个简单的后台界面

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

lnmp
lnmp原创
2022年03月19日 17:00:41423浏览
  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;*/
  29.     }
  30.     .header_li span{
  31.         font-size: 30px;
  32.         font-weight: 800px;
  33.         float: left;
  34.     }
  35.     .header_li_right{
  36.         float: right;
  37.         color:#fff;
  38.     }
  39.     .header_li_right a{
  40.         color:#fff;
  41.         margin:0px 10px;
  42.     }
  44.     .left{
  45.         width:15%;
  46.         background: #022;
  47.         text-align: center;
  48.         height: 820px;
  49.         float: left;
  51.     }
  52.     .left ul li{
  53.         padding:15px;
  54.     }
  55.     .left ul li a{
  56.         color: #fff;
  57.     }
  58.     .right{
  59.         float:right;
  60.         width: 85%;
  61.         background: #0f0;
  62.     }
  63.     .right iframe{
  64.         height: 820px;
  65.         width: 100%;
  66.     }
  67. </style>
  68. <body>
  69.     <div class="header">
  71.         <ul class="header_ur">
  72.             <li class="header_li">
  73.                 <span>后台管理</span>
  74.             </li>
  75.             <li class="header_li_right">
  76.                 <a href="">admin</a>
  77.                 <a href="">退出</a>
  78.             </li>
  80.         </ul>
  81.     </div>
  82.     <div class="left">
  83.         <ul>
  84.             <li>
  85.                 <a href="form.html" target='admin_right'>菜单1</a>
  86.             </li>
  87.             <li>
  88.                 <a href="image.html" target='admin_right'>菜单1</a>
  89.             </li>
  90.             <li>
  91.                 <a href="table.html" target='admin_right'>菜单1</a>
  92.             </li>
  93.             <li>
  94.                 <a href="index.html" target='admin_right'>菜单1</a>
  95.             </li>
  96.         </ul>
  97.     </div>
  98.     <div class="right">
  99.         <iframe src="" frameborder="0"  name='admin_right'></iframe>
  100.     </div>
  101. </body>
  102. </html>

效果图

效果图

上一条：oeasy教您玩转python - 010 - # 不换行输出下一条：利用iframe做一个简单的后台界面
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议