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 ...
随机推荐
- Gym - 101911A "Coffee Break"
传送门 题意: Monocarp得到一份工作,每天要工作 m 分钟,他有一个爱好,喜欢在休息的时候喝咖啡,但是他的老板不乐意了,就给他规定了个 时间 d,在 d 分钟内只能喝一杯咖啡. 现给出Mono ...
- java方法笔记： split,instanceof，StringBuilder（），append()，string ,Integer,Math，正则表达式
http://swiftlet.net/archives/709 如果分隔符在前方,会显示“”,在尾部不显示: *|做分割,需要加\\ API文档如下 1.instanceof 查看前者是否是后者的实 ...
- aliyun centos7 挂载云盘
买了云盘,在哪里放着,也没有用到,今天把她挂上去吧! 1.查看SSD云盘sudo fdisk -l 可以看到SSD系统已经识别为/dev/vdb 2.格式化云盘sudo mkfs.ext4 /dev/ ...
- MySQL创建方法错误:This function has none of DETERMINISTIC, NO SQL
创建function时 出错信息: ERROR 1418 (HY000): This function has none of DETERMINISTIC, NO SQL, or READS SQL ...
- 图形设计必备软件：CorelDRAW
[CorelDRAW 激发创意] CorelDRAW Graphics Suite 是一款领先的图形设计软件,收到数百万专业人士.小型企业主以及全球设计爱好者的热捧.它可以提供无缝的图形.版面.插图. ...
- Java实现单词树(trie)
package com.shundong.utils; import java.util.ArrayList; import java.util.Iterator; import java.util. ...
- mac上安装虚拟机
1.Mac | 怎么安装虚拟机 2.Mac | 怎么安装VMware Fusion虚拟机 资源下载链接: 1.win7旗舰版-64位.iso 2.VMFusion811.rar
- SpringBoot项目部署在同一个tomcat容器报错
在一个Tomcat容器中部署了两个springboot的应用,在启动时发现一直都是第一个启动的项目能启动成功,第二个项目启动报错,错误信息如下: 2018-01-30 15:49:27.810 ERR ...
- spark常见异常汇总
spark常见异常汇总 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 温馨提示: 如果开发运行spark出现问题啦,可能需要运维这边做一些调优,也可能是开发那边需要修改代码.到 ...
- js中Date与timestamp（时间戳）的相互转换
#时间(Date)转时间戳(Timestamp): 1.var timestamp1 = (new Date()).valueOf(); // 结果:1535374762785,通过valueOf() ...