zoukankan      html  css  js  c++  java
  • amazeui 后台模板

    <!doctype html>
    <html class="no-js">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Amaze UI Admin 404 Examples</title>
      <meta name="description" content="这是一个404页面">
      <meta name="keywords" content="404">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="renderer" content="webkit">
      <meta http-equiv="Cache-Control" content="no-siteapp" />
      <script src="http://s.amazeui.org/assets/2.x/js/jquery.min.js"></script>
      <link rel="icon" type="image/png" href="assets/i/favicon.png">
      <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
      <meta name="apple-mobile-web-app-title" content="Amaze UI" />
      <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
      <link rel="stylesheet" href="assets/css/admin.css">
    <style type="text/css">
        .admin-sidebar-list li a,.admin-offcanvas-bar,.admin-sidebar-list li{background: #2b303e;color: #989dac;}
     
        .admin-sidebar-list li{color: #777;}
         
        .am-list li,li.admin-parent{border: 0px ;}
        li.ali-active a,.admin-sidebar-sub>li>a:hover{background: #3b3f4d;color: #FFFFFF;border-left:5px solid #5c9df5;}
         
        div.admin-offcanvas-bar{padding-left: 0px;}
        span.am-badge{margin-left: 20px;}
         .am-panel ul{background: #2b303e;}
         .admin-sidebar-list li a { padding-left: 5px;}
        .admin-sidebar { overflow-y: hidden; overflow-x: hidden;width: 200px; } 
        iframe{margin-right: 100px;}
    </style>
     
     
    </head>
    <body >
    
    <header class="am-topbar am-topbar-inverse admin-header">
      <div class="am-topbar-brand">
        <strong>Amaze UI</strong> <small>后台管理模板</small>
      </div>
     
      <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>
     
      <div class="am-collapse am-topbar-collapse" id="topbar-collapse"
       >
     
        <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list" >
          <li><a href="javascript:;"><span class="am-icon-envelope-o"></span> 收件箱 <span class="am-badge am-badge-warning">5</span></a></li>
          <li class="am-dropdown" data-am-dropdown>
            <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
              <span class="am-icon-users"></span> 管理员 <span class="am-icon-caret-down"></span>
            </a>
            <ul class="am-dropdown-content">
              <li><a href="#"><span class="am-icon-user"></span> 资料</a></li>
              <li><a href="#"><span class="am-icon-cog"></span> 设置</a></li>
              <li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li>
            </ul>
          </li>
          <li class="am-hide-sm-only"><a href="javascript:;" id="admin-fullscreen"><span class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li>
        </ul>
      </div>
    </header>
     
    <div class="am-cf admin-main">
      <!-- sidebar start -->
      <div class="admin-sidebar am-offcanvas" id="admin-offcanvas">
        <div class="am-offcanvas-bar admin-offcanvas-bar" >
      
          <ul class="am-list admin-sidebar-list" >
    
     <li class="am-panel">
        <a data-am-collapse="{target: '#user-nav'}">
            <i class="am-icon-users am-margin-left-sm"></i> 人员管理 <i class="am-icon-angle-right am-fr am-margin-right"></i>
        </a>
        <ul class="am-list am-collapse admin-sidebar-sub am-in" id="user-nav">
            <li><a href="javascript:aaa('/login.html')"><i class="am-icon-user am-margin-left-sm"></i> 添加人员<span class="am-badge am-badge-danger am-round">6</span> </a></li>
            <li><a href="#"><i class="am-icon-user am-margin-left-sm"></i> 人员列表 </a></li>
        </ul>
      </li>
    
    
      <li class="am-panel">
        <a data-am-collapse="{target: '#user-nav2'}">
            <i class="am-icon-users am-margin-left-sm"></i> 人员管理 <i class="am-icon-angle-right am-fr am-margin-right"></i>
        </a>
        <ul class="am-list am-collapse admin-sidebar-sub am-in" id="user-nav2">
            <li class="ali-active"><a href="#"><i class="am-icon-user am-margin-left-sm"></i> 添加人员 </a></li>
            <li><a href="#"><i class="am-icon-user am-margin-left-sm"></i> 人员列表 </a></li>
        </ul>
      </li>
          </ul>
     
     
     
     
        </div>
      </div>
      <!-- sidebar end -->
     
      <!-- content start -->
      <div class="admin-content">
        
    
     <iframe id="content" src="http://www.qq.com" width="103%" height="100%"></iframe>
    
     
    
        
     
    
      </div>
      <!-- content end -->
     
    </div>
    
    <script src="assets/js/amazeui.min.js"></script>
    <script src="assets/js/app.js"></script>
    
    <script type="text/javascript">
    
    function aaa(url) {
        $("#content").attr("src",url);
    
    }
    
    </script>
    
    </body>
    </html>
  • 相关阅读:
    安装oracle11g服务端
    安装oracle11g客户端
    Python生成requirements.txt方法
    oracle创建新用户并授予权限
    正向代理与反向代理【总结】
    使用Eclipse调试Java程序的10个技巧
    如果长颈鹿哭了,它会不会要哽咽好久
    你应该知道的10种软件工具
    我希望在20岁时就知道的26条时间管理技巧
    Vue使用NProgress (NProgress是页面跳转是出现在浏览器顶部的进度条)
  • 原文地址:https://www.cnblogs.com/aliblogs/p/5793035.html
Copyright © 2011-2022 走看看