<!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. CODE[VS]-机票打折-浮点数处理-天梯青铜

    题目描述 Description 输入机票原价(3到4位的正整数,单位:元),再输入机票打折率(小数点后最多一位数字).编程计算打折后机票 的实际价格(单位:元.计算结果要将个位数四舍五入到十位数“元 ...

  2. Malware Defender(HIPS主动防御软件) V2.8 免费版

    软件名称: Malware Defender(HIPS主动防御软件) V2.8 免费版 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win7 / Vista / Win2003 / Win ...

  3. R语言数据结构

    5. 数据结构 5.1 数据结构简介 (1)向量 一个向量的所有元素必须有相同的类型(模式) (2)列表 列表可以非同质的 列表可按位置索引:lst[[2]] 抽取子列表:lst[c(2,5)] 列表 ...

  4. top batch output

    echo 3 > sudo tee /proc/sys/vm/drop_caches top -d30 -bn20 > a

  5. How I Mathematician Wonder What You Are!（poj 3130）

    题意:求问多边形的核(能够看到所有点的点)是否存在. /* 对于这样的题目,我只能面向std编程了,然而还是不理解. 算法可参考:http://www.cnblogs.com/huangxf/p/40 ...

  6. trove instance service 总结

    def create(self, req, body, tenant_id): # TODO(hub-cap): turn this into middleware LOG.info(_LI(&quo ...

  7. 递归——CPS（三）

    JScript不是天然支持CPS,但是可以写一个分发引擎使得能工作在CPS风格下.一般只有一个活动的continuation,所以可以定义规则:JScript CPS 函数允许有返回,但是它们做的最后 ...

  8. 简单的socket方法

    void sockfunc() { WSADATA Ws; WSAStartup(MAKEWORD(,), &Ws); SOCKET hs = socket(AF_INET, SOCK_STR ...

  9. Myeclipse2014中，新建部署Maven项目

    一.环境 1.1 myeclipse2014 1.2 maven3.2.1 1.3 jdk1.7 上述环境配置可参照我之前编写的maven搭建方面的文档.本文着重介绍myeclipse2014下mav ...

  10. 一个小时快速搭建微信小程序

    「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试.可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面).本以为没有 AppID 这个月就与小程序无缘了,庆幸的 ...