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