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 ...

随机推荐

新建体（1）：新建type
类似数组的类型: TYPE TAB_TYPE_MCHNO IS TABLE OF t_r_terminal.rt_merchno%type; tMchNo TAB_TYPE_MCHNO; )集合赋值: ...
window下域名解析系统DNS诊断命令nslookup详解
Ping指令我们很熟悉了,它是一个检查网络状况的命令,在输入的参数是域名的情况下会通过DNS进行查询,但只能查询A记录和CNAME(别名)记录,还会返回域名是否存在,其他的信息都是没有的.如果你需要对 ...
aerospike数据库配置
https://blog.csdn.net/u011344514/article/details/53082757
go kafka
安装导入 go get github.com/Shopify/sarama import "github.com/Shopify/sarama" 使用 1.同步生产者 packag ...
go goroutine
进程和线程进程是程序在操作系统中的一次执行过程,系统进行资源分配和调度的一个独立单位. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位. 一个进程可 ...
ARM三级流水线
title: ARM三级流水线 tags: ARM date: 2018-10-14 16:57:10 --- 参考: ARM指令集E004armproc.chm ARM Architecture R ...
Python基础01
Python基础 1.Python介绍 2.安装 3.Hello World程序 4.变量 5.用户输入 6.表达式if ...else语句 7.表达式for 循环 8.表达式while 循环 9.数 ...
SpringBoot笔记十二：缓存
目录非缓存项目缓存 JSR-107 Spring缓存抽象 @Cacheable @CachePut @CacheEvict @Caching @CacheConfig 整合Redis 先在Dock ...
java io系列04之管道(PipedOutputStream和PipedInputStream)的简介,源码分析和示例
本章,我们对java 管道进行学习. 转载请注明出处:http://www.cnblogs.com/skywang12345/p/io_04.html java 管道介绍在java中,PipedOu ...
使用git 上传项目到gitee/github
参考: https://blog.csdn.net/qq944639839/article/details/79864081 注意:在此之前需要设置ssh公匙详见:Github/github 初始化 ...

Html - 后台模板

Html - 后台模板的更多相关文章

随机推荐

热门专题