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 ...
随机推荐
- Ubuntu下使用sublime text进行py开发
放弃了,半天弄不出一个方便的开放环境,还是现成的iDE方便 下载方法 https://www.sublimetext.com/docs/3/linux_repositories.html 首先安装Pa ...
- POJ 3352 Road Construction ； POJ 3177 Redundant Paths （双联通）
这两题好像是一样的,就是3177要去掉重边. 但是为什么要去重边呢??????我认为如果有重边的话,应该也要考虑在内才是. 这两题我用了求割边,在去掉割边,用DFS缩点. 有大神说用Tarjan,不过 ...
- Gym 101915
Gym - 101915A Printing Books 题意:有一本书,从第X页开始,一共用了n位数字,求此书一共多少页.99就是两位数字,100就是三位数字. 思路:直接模拟即可,我用了一个hi ...
- CRT和EXCRT学习笔记
蒟蒻maomao终于学会\(CRT\)啦!发一篇博客纪念一下(还有防止忘掉) \(CRT\)要解决的是这样一个问题: \[x≡a_1(mod m_1)\] \[x≡a_2(mod m_2)\] ...
- [POI2005] SKA-Piggy Banks
ps.有关Tarjan算法缩点的简要回顾. 今天上午在Luogu随机到了这道题 Luogu P3420,题目大概是这样: 题目描述 Byteazar the Dragon拥有N个小猪存钱罐.每一个存钱 ...
- ubuntu ------ 网络 ifconfig 不显示IP地址
确保4个服务是启动着的
- python如何直接控制鼠标键盘
一.简介 我们知道在windows下输入:win + r,会弹出下面的窗口,而在下面的窗口出现后我们接着按下esc键,下面的窗口会消失 现在设想我们想在python代码里控制键盘,想通过运行代码-&g ...
- urllib 学习一
说明:Urllib 是一个python用于操作URL的模块 python2.x ----> Urillib/Urllib2 python3.x ----> Urllib ...
- Django中的ORM框架使用小技巧
Django中的ORM框架使用小技巧 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. Django对各个数据提供了很好的支持,包括PostgreSQL,MySQL,SQLite ...
- Hortonworks官网文档怎么找？
Hortonworks官网文档怎么找? 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 俗话说,授人予鱼不如授人予渔,网上部署HDP的部署方式的博客有很多,看得你是眼花缭乱的.其实万 ...