<!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. 解决vs2013下创建的python文件，到其他平台（如linux）下中文乱码（或运行时报SyntaxError: (unicode error) 'utf-8' codec can't decode byte...）

    Vs2013中创建python文件,在文件中没输入中文时,编码为utf-8的,如图 接着,在里面输入几行中文后,再次用notepad++查看其编码如下,在vs下运行也报错(用cmd运行就不会): 根据 ...

  2. vue跨组件通信的几种方法

    http://www.tuicool.com/articles/jyM32mA 在开发组件的时候,一定会遇到组件的通信,比如点击一个图标出现弹窗和蒙层,这三个分别是不同的组件.管理他们之间的状态就成了 ...

  3. 【转】Zookeeper-Watcher机制与异步调用原理

    声明:本文转载自http://shift-alt-ctrl.iteye.com/blog/1847320,转载请务必声明. Watcher机制:目的是为ZK客户端操作提供一种类似于异步获得数据的操作. ...

  4. windows自带的线程池

    #define _CRT_SECURE_NO_WARNINGS #include "iostream" #include "windows.h" using n ...

  5. background-size （设置背景图片的大小）

    设置背景图片的大小,以长度值或百分比显示(数值包括 长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: au ...

  6. 在一个form里边同时执行搜索和 execl导出功能

    一个form 分搜索 和 导出<form name="searchform" id="searchform" > <input type=&q ...

  7. 寒假学干货之------android开发环境

    1.下载安装jdk(http://www.oracle.com/technetwork/java/javase/downloads/index.html)装se版的就可以了,复制jdk目录路径,之后配 ...

  8. C++实现中缀表达式转前、后缀

    #include<iostream> #include<string> #include<stack> using namespace std; bool isIn ...

  9. 获取客户端IP地址经纬度所在城市

    <?php $getIp=$_SERVER["REMOTE_ADDR"]; echo 'IP:',$getIp; echo '<br/>'; $content = ...

  10. js、jquery的入口函数及其执行与图片加载的先后顺序

    js的入口函数写法: window.onload = function() { }; 如果文件中有多个window.onload入口函数,则只会执行最后一个,之前的入口函数没有用. jquery的入口 ...