<!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>

amazeui 后台模板的更多相关文章

  1. bootstrap快速搭建属于自己的后台模板库

    不论做什么项目,我们都以快速搭建为主,设计师固然重要,但是,我们前端开发的也必须能给出自己以前做过什么样的模板,自己收藏的模板,或者我们弹框的形式,我的提示框的形式,我用的下拉框的插件,日历的插件,我 ...

  2. Matrix Admin 后台模板笔记

    一个后台模板用久了就想换一个.上次找到了Matrix Admin.和ACE一样都是Bootstrap风格,比较容易上手.Matrix要更健壮些.感觉拿去做用户界面也是可以的. 整体风格: 1.表单验证 ...

  3. 12个免费的 Twitter Bootstrap 后台模板

    在互联网上提供很多免费的 Bootstrap 管理后台主题.所有你需要做的就是将它们下载并安装它们,这真的不是什么难事.问题是如何寻找到能够完美符合您的网站需求的主题.当然,你可以自己制作自定义的主题 ...

  4. bootstrap绿色大气后台模板下载[转]

    From:http://www.oschina.net/code/snippet_2364127_48176 1. [图片] 2. [文件] 素材火官网后台模板下载.rar ~ 4MB     下载( ...

  5. 很好很实用的.net、网站系统后台模板

    本模板是程序园给大家提供的应用系统开发后台模板,主要使用div+css布局实现,菜单使用了ddaccordion.js菜单控件. 转载请标明:http://www.kwstu.com/ArticleV ...

  6. 简洁AngularJS框架后台管理系统bootstrap后台模板

    最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS ...

  7. 10款免费Bootstrap后台模板演示及下载

    自从有了类似Bootstrap这样强大的前端框架之后,无论我们是做静态页面,还是做网站主题,着实方便很多.即便有很多类似的其他国产.海外的前端框架比较,Bootstrap用户量以及功能文档还是比较大的 ...

  8. PHP分帧后台模板页面css样式,js引入方法

    一,首先把下载好的分帧后台模板放到对应的目录中,HTML显示页面放到View目录中,CSS和JS.img图片等公共资源放到include目录中 二.然后开始准备更改CSS和JS , img路径操作:( ...

  9. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

随机推荐

  1. js函数的可变参数

    //对于js的可变参数的清空,在定义函数式不需要写上参数, 在函数内部使用argument对象可以 直接获取参数个数等信息 //在调用函数式可以传递任意个数的参数 function text(){ v ...

  2. ios在项目中打开word文档、ppt等总结

    最近在项目开发中遇到下载附件文档预览需求,在这里总结一下我的实现方法,本文最后会附带我写的demo下载地址 这里我总结了三种实现方法(1)用webView预览(2)通过UIDocumentIntera ...

  3. JavaScript基础（更新第二波）

    下面接着说JavaScript打开新的窗口. open()方法可以查找一个已经存在或者新建的浏览器窗口. 语法: window.open([URL]),[窗口名称],[参数字符串] 参数说明: URL ...

  4. PHP文件上传预览

    主页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  5. js得到当前页面的url信息方法

    js得到当前页面的url信息方法:http://www.cnblogs.com/zuosong160522/p/5755615.html js获取url传递参数,js获取url?后面的参数:http: ...

  6. 【Python】使用super初始化超类

    初始化超类的传统方式,在子类的实例中调用超类的__init__()方法. 但是传统的方法有两个问题,比如: 问题1: class MyBaseClass: def __init__(self, val ...

  7. [河南省ACM省赛-第三届] BUYING FEED （nyoj 248）

    #include<iostream> #include<cstdio> #include<algorithm> #include<cstring> us ...

  8. 使用vscode对c进行调试

    最近在学习C语言.知道vscode支持对c语言的代码的调试,就想试试.然后找了教程: https://code.visualstudio.com/docs/languages/cpp http://w ...

  9. Jquery实现双击表单元格可编辑

    <script type="text/javascript"> function doTableTdEditClick(param){ doTdEditable(par ...

  10. HDU 5130 Signal Interference(计算几何 + 模板)

    HDU 5130 Signal Interference(计算几何 + 模板) 题目链接http://acm.hdu.edu.cn/showproblem.php?pid=5130 Descripti ...