仿bootstrap的
<!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" />
<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,li>a:hover{background: #3b3f4d;color: #FFFFFF;border-left:5px solid #5c9df5;} div.admin-offcanvas-bar{padding-left: 20px;}
span.am-badge{margin-left: 50px;} </style> </head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器,Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
以获得更好的体验!</p>
<![endif]--> <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>总览</li>
<li><a href="admin-index.html"><span class="am-icon-home"></span> 首页</a></li> <li class="ali-active"><a class="" href="admin-table.html"><span class="am-icon-table "></span> 表格<span class="am-badge am-badge-danger am-round">6</span></a></li>
<li><a href="admin-form.html"><span class="am-icon-pencil-square-o"></span> 表单</a></li>
<li><a href="#"><span class="am-icon-sign-out"></span> 注销</a></li>
<li>总览</li>
<li><a href="admin-index.html"><span class="am-icon-home"></span> 首页</a></li> <li class=""><a class="" href="admin-table.html"><span class="am-icon-table "></span> 表格</a></li>
<li><a href="admin-form.html"><span class="am-icon-pencil-square-o"></span> 表单</a></li>
<li><a href="#"><span class="am-icon-sign-out"></span> 注销</a></li> </ul> </div>
</div>
<!-- sidebar end --> <!-- content start -->
<div class="admin-content">
<div class="admin-content-body">
<div class="am-cf am-padding am-padding-bottom-0">
<div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">404</strong> / <small>That’s an error</small></div>
</div> <hr> <div class="am-g">
<div class="am-u-sm-12">
<h2 class="am-text-center am-text-xxxl am-margin-top-lg">404. Not Found</h2>
<p class="am-text-center">没有找到你要的页面</p>
<pre class="page-404">
.----.
_.'__ `.
.--($)($$)---/#\
.' @ /###\
: , #####
`-..__.-' _.-\###/
`;_: `"'
.'"""""`.
/, ya ,\\
// 404! \\
`-._______.-'
___`. | .'___
(______|______)
</pre>
</div>
</div>
</div> <footer class="admin-content-footer">
<hr>
<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
</footer>
</div>
<!-- content end --> </div> <a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a> <footer>
<hr>
<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
</footer> <!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]--> <!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>
仿bootstrap的的更多相关文章
- 【推荐】免费,19 款仿 Bootstrap 后台管理主题下载
声明: 1. 本篇文章提到的仿 Bootstrap 风格的主题,是基于 jQuery 的 ASP.NET MVC 控件库的主题. 2. FineUIMvc(基础版)完全免费,可以用于商业项目. 目录 ...
- 19 款仿 Bootstrap 后台管理主题免费下载
声明: 1. 本篇文章提到的仿 Bootstrap 风格的主题,是基于 jQuery 的 ASP.NET MVC 控件库的主题. 2. FineUIMvc(基础版)完全免费,可以用于商业项目. 目录 ...
- 高仿bootstrap的layout效果(一)
公司研发一个新的cms,为了减少以后的修改和尽可能大程度的满足客户对cms的灵活需求,我的经理安排我去做一个与bootstrap的layout差不多的效果,这叫什么,锻炼的时候来了,加油,这个急不得一 ...
- 高仿bootstrap样式的分页插件
链接:https://pan.baidu.com/s/1jKgn2hK 密码:whwl 不知道是自己的第几个分页插件了,以前写一个丢一个,桌面,U盘,移动硬盘.想用的时候找不到,这次传网上来.大家帮忙 ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- Bootstrap风格button
一直非常喜欢Bootstrap的按钮风格,仿照Bootstrap做了一套按钮.在ie6/7/8/9/10/11.chrome.firefox下能正常使用. ie6/7/8不支持css3的样式.按钮在这 ...
- 快速使用node.js进行web开发
首先关于node.js的学习,这里推荐一本比较好的教程,nodejs web开发指南,该书通俗易懂地将node.js语言特性讲解完之后,又从一个项目角度带领读者使用node.js学习web开发.相信这 ...
- 基于Vue2-Calendar改进的日历组件(含中文使用说明)
一,前言 我是刚学Vue的菜鸟,在使用过程中需要用到日历控件,由于项目中原来是用jQuery写的,因此用了bootstarp的日历控件,但是配合Vue实在有点蛋疼,不够优雅…… 于是网上搜了好久找到了 ...
- 跨平台Redis可视化工具Web Redis Manager
一.简介 最近因为工作需要,使用了一些单机版Redis的界面化管理工具,使用过程中那惨痛的体验真的只有用过的人才能体会:为此本人和小伙伴准备动手一个Redis可视化工具,但是因为小伙伴最近工作比较忙, ...
随机推荐
- CSS3中盒子的box-sizing属性
box-sizing 属性 box-sizing 属性用来改变默认的 CSS盒模型 对元素宽高的计算方式.这个属性可以用于模拟那些非正确支持标准盒模型的浏览器的表现. box-sizing:conte ...
- java操作mongodb——插入数据
在mongodb中,表(Table)被称之为集合(Collection),记录(Record)被称为文档(Document) 首先连接到数据库 MongoClient mongoClient = ne ...
- ES 6 : 数组的扩展
1.Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象和可遍历(iterable)对象. 下面是一个类似数组的对象,Array.from将它转为真正的数组. ...
- #大数加减乘除#校赛D题solve
#include<iostream> #include<cstdio> #include<cstring> #include<string> #incl ...
- 【angular+bootstrap】angular初级的时间选择器
近期的一个项目,是用angular来写的,本来框架就是第一次接触,使用相关插件的时候就感觉更加没有头绪了,其中一个插件就是时间选择器.比较好用时间选择器就是bootstrap里面的datetimepi ...
- mob.com Android studio 配置环境
- 微信内置浏览器私有接口WeixinJSBridge介绍(转)
这篇文章主要介绍了微信内置浏览器私有接口WeixinJSBridge介绍,本文讲解了发送给好友.分享函数.隐藏工具栏.隐藏三个点按钮等功能,需要的朋友可以参考下 微信网页进入,右上角有三个小点,没错, ...
- [阿当视频]WEB组件学习笔记
— 视频看完了,自定义事件还不懂,等完全懂了再更新并完成整篇案例 1. JS分层和组件的种类浏览器底层包括HTML CSS JS(DOM/BOM/Style/Canvas 2D/WebGl/SVG) ...
- non-ARC代码转 ARC 排除 “Existing instance variable 'delegate' for property with assign attribute must be _unsafe _unretained” 错误
原来非ARC代码是 @interface MHWebImageDownloader : NSObject { id<MHWebImageDownloaderDelegate> delega ...
- Javascript封装弹出框控件
1.首先先定义好弹出框的HTML结构 <div class="g-dialog-contianer"> <div class="dialog-windo ...