<!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. 引用Excel.dll 时找不到类型怎么办

    将引用(Microsoft.Office.Interop.Excel)的属性"嵌入互操作类型"由True修改为False即可

  2. THINKCMF-NGINX伪静态

    location / { index index.php index.html index.htm; if (!-e $request_filename) { rewrite ^/index.php( ...

  3. 1. LAMP----PHP开发环境搭建(Win)

    LAMP=Linux+Apache+MySQL+PHP. Step1 安装Apache http://httpd.apache.org/download.cgi 1.打开上面网址->点击File ...

  4. 洛谷-统计数字-NOIP2007提高组复赛

    题目描述 Description 某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*10^9).已知不相同的数不超过10000个,现在需要统计这些自然数各自出现的次数,并按照 ...

  5. how to make a git repo un-git?

    If you have a git repo and now you want to make it a plain filesystem tree .. (removing the git trac ...

  6. Pthon修炼5

    函数    一.自定义函数 def:表示函数的关键字 函数名:函数的名称 函数体:函数中进行一系列的逻辑计算 参数:为函数体提供数据 返回值:执行完函数return 一个值 例:def count(x ...

  7. directive(指令里的)的compile,pre-link,post-link,link,transclude

    The nitty-gritty of compile and link functions inside AngularJS directives  The nitty-gritty of comp ...

  8. SQL中判断字符串中包含字符的方法

    通过2个函数CHARINDEX和PATINDEX以及通配符的灵活使用 函数:CHARINDEX和PATINDEX CHARINDEX:查某字符(串)是否包含在其他字符串中,返回字符串中指定表达式的起始 ...

  9. ubuntu tips

    1.ibus-setup 2.tips:

  10. archive log

    1.查看归档模式 2.查看归档文件所在位置 3.完全恢复和不完全恢复 完全恢复:找到问题产生的时间点,在时间点之后的数据也能同时保留 不完全恢复:只能恢复到产生问题的那个时间点的数据状态. 4.非归档 ...