<!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. react-router的基础知识

    一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...

  2. Batch File Rename Utility(文件批量改名软件) 1.1.4231

    软件名称: Batch File Rename Utility(文件批量改名软件) 1.1.4231.23098 软件语言: 英文 授权方式: 免费软件 运行环境: Win7 / Vista / Wi ...

  3. USACO 3.2 Factorials

    Factorials The factorial of an integer N, written N!, is the product of all the integers from 1 thro ...

  4. [HMLY]4.CocoaPods详解----制作

    作者:wangzz 原文地址:http://blog.csdn.net/wzzvictory/article/details/20067595 转载请注明出处   学会使用别人的pods依赖库后,你一 ...

  5. IntelliJ IDEA “Finds duplicated code”提示如何关闭

    发现重复的代码这个提示真的很烦啊,我们怎么关闭他呢. 设置在这里: Settings -> Editor -> Inspections -> General -> Duplic ...

  6. [DP之计数DP]

    其实说实在 我在写这篇博客的时候 才刚刚草了一道这样类型的题 之前几乎没有接触过 接触过也是平时比赛的 没有系统的做过 可以说0基础 我所理解的计数dp就是想办法去达到它要的目的 而且一定要非常劲非常 ...

  7. ViewCompat.animate(view) 动画的操作

    ViewCompat.animate(view) 实现动画的操作,动画兼容包; ViewCompat.animate(view) 实现动画的操作 .setDuration(200) .scaleX(0 ...

  8. Tiny6410之LED裸机驱动

    操作步骤: 第一步:查看开发板电路原理图 找到LED 的管脚所对应的寄存器 nLED_1 - GPK4 nLED_2 - GPK5 nLED_3 - GPK6 nLED_4 - GPK7 由原理图可知 ...

  9. 【转】JQuery.Ajax之错误调试帮助信息

    下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求 ...

  10. AVAudioPlayer的锁屏播放控制和锁屏播放信息显示

    在设置这个锁屏之前,首先得设置应用支持后台音乐播放,TAGETS->Info->Required background modes->App plays audio or strea ...