amazeui 后台模板

<!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/[email protected]">
  <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>
时间: 2024-10-10 16:11:11

amazeui 后台模板的相关文章

最新的建站(小说站)分享(一)--后台模板及网站配置

最近老板叫我们自己写一个站,练练手.不能让我们闲着...我想到底该些什么呢,想到自己平时挺喜欢看小说的,就决定写一个小说站了. 不多说,想好就立即行动,开始没什么头绪,想了半天不知道该怎么写.于是乎就在网上搜了好多相关的资料,和我们技术总监讨论了好久,现在终于有点眉目了,下面就开始向大家介绍一下我写小说站的经历,只能作为新手参考,大神轻点喷! 小说站说难不难,说简单也没辣么简单.挺适合练手的,小说站整体来说要比企业站难一点,里面的分类是重头戏,小说种类太多,要分很多类,这里的分类以后再说. 这里

Matrix Admin 后台模板笔记

一个后台模板用久了就想换一个.上次找到了Matrix Admin.和ACE一样都是Bootstrap风格,比较容易上手.Matrix要更健壮些.感觉拿去做用户界面也是可以的. 整体风格: 1.表单验证 验证是借助于jquery.validate.js . 有丰富的验证方法,更多API请戳这里 js: $("#basic_validate").validate({ rules:{ required:{ required:true }, email:{ required:true, ema

轻量级权限管理系统——后台模板

引言 最近在学习bootstrap因此在网上找了一个bootstrap管理后台模板,不过bootstrap的版本是2.0的版本,先学习学习吧 :) 项目框架 PS:本来打算领域驱动模型的,但是我也是处于学习阶段,而且还是还没有入门,所以先打算弄一个简单三层的,然后再重构到领域模型..积累还不够,努力学习ing 1.URMS.Model.EF我用的是EntityFramework 的基于数据库的CodeFirst模式生成的 2.URMS.UI.Web.Admin是用的MVC5 基于数据库的Code

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

最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS 高级管理系统模板.它建造在流行的Twitter Bootstrapv3框架上.Minovate完全基于HTML5 + CSS3标准.是充分响应的支持每一个设备和浏览器. Minovate包含许多示例页面可以使用它的元素和可定制的.你可以选择6种颜色的头部样式.导航.你可以切换固定导航,标题和选择等

基于Bootstrap的网站后台模板Unicorn - Admin Template最新无错版下载

Unicorn - Admin Template Unicorn - Admin Template 是一款支持视网膜屏幕.完全响应式布局,可用于任何应用程序的管理模板.该面板适应任何宽度的设备.无论是智能手机.平板电脑或桌面浏览器都能完美适应.最新版本基于 Bootstrap 3 构建. 使用LESS编译 响应式设计,支持任何的PC或MAC系统,智能手机和平板电脑.Responsive Design, support any PC or MAC systems, phones and table

后台模板

使用后台模板是为了把前端显示作为model层的一部分,当数据结构确定了,同一个功能可以套用不同的模板结构生成不同的结构,就像组件一样 数据结构 var model = {//左侧导航动态数据 navs:[ {'idx':'treeopt','name':'Tree操作','icon':'fa-dashboard'}, {'idx':'plmission','name':'计划任务','icon':'fa-bookmark'}, {'idx':'webvisit','name':'Web访问','

jquery开发网站后台模板源代码下载

原文:jquery开发网站后台模板源代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463634934784.htm 这效果怎么样????

基于HTML5 Bootstrap搭建的后台模板,分页,模糊查询已经全部JS实现,无需编码,嵌入数据即可开发,内置8款皮肤,欧美风格,非常好用!

原文:基于HTML5 Bootstrap搭建的后台模板,分页,模糊查询已经全部JS实现,无需编码,嵌入数据即可开发,内置8款皮肤,欧美风格,非常好用! 源代码下载地址:http://www.zuidaima.com/share/1550463575788544.htm 分页,查询功能已经全部用JS实现,无需再做此类代码编写,嵌入数据即可,真心美观好用.       

免费的Bootstrap管理后台模板集合

Free Bootstrap Admin Templates for Designers 1. Admin Lite AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕分辨率适合从小型移动设备到大型台式机. 2. Dashboard Sidebar 这是一个管理后台模板,拥有控制面板或仪表板.这个模板有一个可折叠的工具栏菜单,并且有可以作为一个数据网格的表格. 3. DevOOPS DevOOPS是一个自适应免费管理仪表板主题,