Html - 后台模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--单独子版的title-->
<!--<title>{% block title %}{% endblock %}</title>--> <!--单独子版的css-->
<!--{% block css %}{% endblock %}--> <style>
body{
margin: 0;
}
.left{
float: left;
}
.right{
float: right;
}
.hide{
display: none;
} .pg-header{
height: 48px;
background-color: #8b86ff;
min-width: 1100px;
line-height: 48px;
}
.pg-header .logo{
color: #effdff;
width: 200px;
background-color: #8b86ff;
text-align: center;
font-size: 20px;
}
.pg-header .hl-menu .item ,.pg-header .hr-menu .item{
color: white;
padding:0 10px;
display: inline-block;
height: 48px;
}
.pg-header .hl-menu .item:hover ,.pg-header .hr-menu .item:hover{
background-color: #726dff;
}
.pg-header .hl-menu .item-set{
display: inline-block;
position: relative;
}
.pg-header .hl-menu .item-set .sets{
position: absolute;
width: 100px;
background-color: antiquewhite;
}
.pg-header .hl-menu .item-set:hover .sets {
display: block;
z-index: 10;
} .pg-header .hl-menu .item-set .sets a{
display: block;
line-height: 30px;
background-color: #ad9cff;
}
.pg-header .hl-menu .item-set .sets a:hover{
background-color: #8a71ff;
} .avatar{
display: inline-block;
position: relative;
float: right;
}
.avatar .sets{
position: absolute;
width: 100px;
left: -55px;
}
.avatar:hover .sets{
display: block;
border: blue solid ;
top: 48px;
z-index: 10;
}
.avatar .item img{
width: 35px ;
height: 35px;
border-radius: 50%;
margin-top: 6px;
}
.avatar:hover .sets a{
display: block;
line-height: 30px;
}
.pg-body .menus{
width: 200px;
position: absolute;
top: 48px;
left: 0px;
bottom: 0px;
background-color: #ad9cff;
}
.pg-body .countents{
position: absolute;
top: 48px;
left: 200px;
right: 0;
bottom: 0;
background-color: antiquewhite;
overflow: scroll;
} .menus-item .item{
padding: 8px;
}
.menus-item .content{
padding: 2px;
} </style> </head>
<body>
<div class="pg-header">
<!--共享的-->
<div class="logo left">Anec后台管理</div>
<div class="hl-menu left">
<a href="#" class="item">菜单一</a>
<div class="item-set">
<a href="#" class="item">菜单二</a>
<div class="sets hide">
<a href="#" >菜单二1</a>
<a href="#" >菜单二2</a>
<a href="#" >菜单二3</a>
</div>
</div>
<div class="item-set">
<a href="#" class="item">菜单三</a>
<div class="sets hide">
<a href="#" >菜单三1</a>
<a href="#" >菜单三2</a>
<a href="#" >菜单三3</a>
</div>
</div>
<div class="item-set">
<a href="#" class="item">菜单四</a>
<div class="sets hide">
<a href="#" >菜单四1</a>
<a href="#" >菜单四2</a>
<a href="#" >菜单四3</a>
</div>
</div> </div>
<div class="hr-menu right">
<a href="#" class="item">消息</a>
<a href="#" class="item">通知</a>
<a href="#" class="item">任务</a>
<div class="avatar">
<a href="#" class="item">
<img src="111.jpg" >
</a>
<div class="sets hide">
<a href="#" >菜单1</a>
<a href="#" >菜单2</a>
<a href="#" >菜单3</a>
</div>
</div> </div>
</div>
<div class="pg-body">
<div class="menus">
<!--共享的-->
<div class="menus-item">
<div class="item"><a>功能1</a></div>
<div class="content"><a>功能1-1</a></div>
<div class="content"><a>功能1-2</a></div>
<div class="content"><a>功能1-3</a></div>
</div>
<div class="menus-item">
<div class="item"><a>功能2</a></div>
<div class="content"><a>功能2-1</a></div>
<div class="content"><a>功能2-2</a></div>
<div class="content"><a>功能1-3</a></div>
</div>
<div class="menus-item">
<div class="item"><a>功能3</a></div>
<div class="content"><a>功能3-1</a></div>
<div class="content"><a>功能3-2</a></div>
<div class="content"><a>功能3-3</a></div>
</div> </div>
<div class="countents">
<!--单独显示的-->
<!--{% countents %}{% endblock %}-->
<!--<div style="height: 1000px"></div>-->
</div>
</div>
<div class="pg-foot">
<!--共享的-->
</div>
<!--单独子版js-->
<!--{% block js %}{% endblock %}-->
</body>
</html>
Html - 后台模板的更多相关文章
- bootstrap快速搭建属于自己的后台模板库
不论做什么项目,我们都以快速搭建为主,设计师固然重要,但是,我们前端开发的也必须能给出自己以前做过什么样的模板,自己收藏的模板,或者我们弹框的形式,我的提示框的形式,我用的下拉框的插件,日历的插件,我 ...
- Matrix Admin 后台模板笔记
一个后台模板用久了就想换一个.上次找到了Matrix Admin.和ACE一样都是Bootstrap风格,比较容易上手.Matrix要更健壮些.感觉拿去做用户界面也是可以的. 整体风格: 1.表单验证 ...
- 12个免费的 Twitter Bootstrap 后台模板
在互联网上提供很多免费的 Bootstrap 管理后台主题.所有你需要做的就是将它们下载并安装它们,这真的不是什么难事.问题是如何寻找到能够完美符合您的网站需求的主题.当然,你可以自己制作自定义的主题 ...
- bootstrap绿色大气后台模板下载[转]
From:http://www.oschina.net/code/snippet_2364127_48176 1. [图片] 2. [文件] 素材火官网后台模板下载.rar ~ 4MB 下载( ...
- 很好很实用的.net、网站系统后台模板
本模板是程序园给大家提供的应用系统开发后台模板,主要使用div+css布局实现,菜单使用了ddaccordion.js菜单控件. 转载请标明:http://www.kwstu.com/ArticleV ...
- 简洁AngularJS框架后台管理系统bootstrap后台模板
最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS ...
- 10款免费Bootstrap后台模板演示及下载
自从有了类似Bootstrap这样强大的前端框架之后,无论我们是做静态页面,还是做网站主题,着实方便很多.即便有很多类似的其他国产.海外的前端框架比较,Bootstrap用户量以及功能文档还是比较大的 ...
- PHP分帧后台模板页面css样式,js引入方法
一,首先把下载好的分帧后台模板放到对应的目录中,HTML显示页面放到View目录中,CSS和JS.img图片等公共资源放到include目录中 二.然后开始准备更改CSS和JS , img路径操作:( ...
- python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
- Django配置xadmin后台模板之坑（一）
环境: Python3.6 + Django2.0 + xadmin2.0 一.安装 1.首先安装就会有一个坑,很多教程的安装是直接在虚拟环境下使用 pip install xadmin 或者 pip ...
随机推荐
- Vuex异步请求数据通过computed计算属性值
问题描述: 使用Vuex管理数据时,在组件内使用$emit分发事件后,获取回来的数据要自动更新到该组件内,需要使用computed来计算更新. 一开始尝试使用赋值给data的方法,后来发现重新发起aj ...
- JS事件（二）事件对象
html事件处理程序中,变量event中保存着事件对象 <button onclick="alert(ev.type)" id="btn">clic ...
- 一个很适合初学者的selenium教程
http://www.cnblogs.com/hustar0102/p/5885115.html
- springboot 新模板 呵呵了
<html> <head> <title>批处理任务管理</title> <meta name="decorator" con ...
- java中Comparatable接口和Comparator接口的区别
1.不同类型的排序规则 .自然排序是什么? 自然排序是一种升序排序.对于不同的数据类型,升序规则不一样: BigDecimal BigInteger Byte Double Float Int ...
- javaMail简介(一)
一:开发javaMail用到的协议 SMTP(simple Message Transfer Protocal):简单消息传输协议.发送邮件时使用的协议,描述了数据该如何表示,默认端口为:25 POP ...
- Java封装、继承整理
封装 3.1封装概念: 提高代码复用性 隐藏实现细节,对外访问提供公共接口 提高安全型 3.2封装举例 机箱就是隐藏实现细节,提供了公共的访问接口 3.3私有private 一般对成员属性的访问动作: ...
- cors解决跨域
什么是cors CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpReq ...
- 5.原型模式（Prototype）
依赖关系倒置: 动机(Motivate): 在软件系统中,经常面临着“某些结构复杂的对象”的创建工作;由于需求的变化,这些对象经常面临着剧烈的变化,但是它们却拥有比较稳定一致的接口. 如何 ...
- laravel 5.4 fopen(): Filename cannot be empty
1.出错的报错信息(我在用laravel5.4文件上传时候出错的) laravel 5.4 fopen(): Filename cannot be empty 2.解决的方法 在php.ini中修改临 ...