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 ...
随机推荐
- hdu 2973"YAPTCHA"(威尔逊定理)
传送门 题意: 给出自然数 n,计算出 Sn 的值,其中 [ x ]表示不大于 x 的最大整数. 题解: 根据威尔逊定理,如果 p 为素数,那么 (p-1)! ≡ -1(mod p),即 (p-1)! ...
- maven pom添加本地jar，不提交私库
<dependency> <groupId>taobao-sdk</groupId> <artifactId>taobaosdk</artifac ...
- CentOS 添加新的硬盘之后不停机操作
echo "- - -" > /sys/class/scsi_host/host0/scan echo "- - -" > /sys/class/s ...
- curl与wget
curl 和wget 区别 使用方法 可参考 curl vs Wget 1.curl是libcurl这个库支持的,wget是一个纯粹的命令行命令.2.curl支持更多的协议.curl supports ...
- 解决Nginx出现403 forbidden (13: Permission denied)报错的四种方法
我是在在本地用虚拟机中通过yum安装nginx的,安装一切正常,但是访问时报403, 于是查看nginx日志,路径为/var/log/nginx/error.log.打开日志发现报错Permissio ...
- jmeter中判断数据库是否存在相应的记录
jmeter判断数据库中是否存在相应记录可以使用count 配合case,然后再加个断言,后面用 变量JMeterThread.last_sample_ok来判断是否存在相应记录 select cas ...
- fuel6.0安装部署
在经过一系列安装openstack方式后,个人觉得fuel的安装方式相对简易,接下来记录下安装部署fuel6.0的过程.本教程适合想把fuel6.0部署后,云主机需要连接外网的需求. 安装virtua ...
- HDFS 开发中的文件配置优先级
一.先看集群上的配置,这里设置了文件块副本数为 3 上传一个文件试试 public class ConfigPriority { private Configuration conf; private ...
- Linux学习笔记：【002】ARM指令流水线
指令的处理 在CPU中,对于指令的处理一般分为: 1.取指令阶段 取指令(Instruction Fetch,IF)阶段是将一条指令从主存中取到指令寄存器的过程. 程序计数器PC中的数值,用来指示当前 ...
- Can't read swagger JSON from http://localhost:8080/Test/api-docs
新手入坑Swagger,搜了下网上博客,各种整合费时费力.弄出来竟然报错: Can't read swagger JSON from http://localhost:8080/Test/api-do ...