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 ...
随机推荐
- javascript(基础)_对数组的遍历方法总结（find, findIndex, forEach,）
一.前言 ...
- SVN提交前准备
操作步骤1: 操作步骤2: 操作步骤3: 操作步骤4: 操作步骤5: 操作步骤6:查看 操作步骤7:ignore 操作步骤8:直接提交项目
- VMware 无法打开内核设备 \\.\Global\vmx86
无法打开内核设备 \\.\Global\vmx86: 系统找不到指定的文件.你想要在安装 VMware Workstation 前重启吗? vmware 安装完成后,打开现有虚拟系统时,报错. 无法打 ...
- HTTP Method小结
GET 从指定的url上获取内容 POST 提交body中的内容给服务器中指定的url中,属于非幂等的(non-idempotent)请求 HEAD 从指定的url上获取header内容(类似Get方 ...
- 转 G1垃圾收集器入门
转自:http://blog.csdn.net/zhanggang807/article/details/45956325 最近在复习Java GC,因为G1比较新,JDK1.7才正式引入,比较艰难的 ...
- java使用google开源工具实现图片压缩【转】
jar包名 import net.coobird.thumbnailator.Thumbnails; import net.coobird.thumbnailator.geometry.Positio ...
- [leetcode-128] 最长连续序列
给定一个未排序的整数数组,找出最长连续序列的长度. 要求算法的时间复杂度为 O(n). 示例: 输入: [100, 4, 200, 1, 3, 2] 输出: 4 解释: 最长连续序列是 [1, 2, ...
- html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...
- UUID在Java中的实现与应用
UUID是什么 UUID的全称为:Universally Unique IDentifier,也被称为GUID(Globally Unique IDentifier).是一种由算法生成的唯一标识,它实 ...
- 百度编辑器ueditor 光标位置的坐标
项目需求: 输入某个字符时,弹出一个弹框 弹框位置跟随光标处 经查找和亲测,下面记录一下代码: // 下面计算坐标 let domUtils = UE.dom.domUtils let bk_star ...