image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/css/commons.css">
{% block css %}{% endblock %}
<style>
body{
margin: 0;
}
{#全局向左飘#}
.left{
float: left;
}
{#全局像右飘#}
.right{
float: right;
}
.hide{
display: none;
}
{#设置头部边栏的高度，颜色，最小宽度，必成一正行让文字居中#}
.pg-header{
height: 48px;
background-color: #2f72ab;
min-width: 1100px;
line-height: 48px;
}
{#设置logo的展示#}
.pg-header .logo{
color: white;
font-size: 24px;
width: 200px;
background-color: #1c5a9c;
text-align: center;
}
{# 设置头部左右菜单的展示 #}
.pg-header .hl-menu .item, .pg-header .hr-menu .item{
color: white;
padding: 0 10px;
height: 48px;
display: inline-block;
}
{#设置左右头部菜单选中的展示#}
.pg-header .hl-menu .item:hover,.pg-header .hr-menu .item:hover{
background-color: #1c5a9c;
}
{#设置下拉的头部标签设置#}
.pg-header .hl-menu .item-set{
display: inline-block;
position: relative
}
{#设置下拉框后的样式#}
.pg-header .hl-menu .item-set .sets{
position: absolute;
width: 150px;
background-color: aliceblue;
border: 1px solid #dddddd;
display: none;
z-index: 100;
}
{#设置下拉框#}
.pg-header .hl-menu .item-set .sets a{
display: block;
line-height: 30px;
}
{#设置格式#}
.pg-header .hl-menu .item-set:hover .sets{
display: block;
}
.avatar{
display: inline-block;
position: relative;
}
.avatar img{
margin-top: 4px;
border-radius: 50%;
}
{# 设置头像的菜单的下拉 #}
.avatar .sets{
position: absolute;
width: 150px;
border: 1px solid #dddddd;
left: -90px;
top: 48px;
display: none;
z-index: 100;
background-color: black;
}
.avatar .sets a{
display: block;
}
.avatar:hover .sets{
display: block;
}
.pg-body .menus{
width: 200px;
background-color: yellowgreen;
position: absolute;
left: 0px;
bottom: 0;
top: 48px;
}
.pg-body .contents{
position: absolute;
top: 48px;
right: 0;
bottom: 0;
background-color: #dddddd;
left:205px ;
overflow:scroll ;
}
.menus .item .item-title{
padding: 8px;
background-color: #dddddd;
}
.menus .item .item-content a{
display: block;
padding: 3px;
border-left: 3px solid transparent;
}
.menus .item .item-content a:hover{
border-left: 3px solid #1c5a9c;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">公司的logo</div>
<div class="hl-menu left">
<a class="item" href="#">菜单一</a>
<a class="item" href="#">菜单二</a>
<a class="item" href="#">菜单三</a>
{#出现隐藏下拉选项 用这种#}
<div class="item-set">
<a class="item" href="#">菜单四</a>
<div class="sets">
<a href="#">4-1</a>
<a href="#">4-2</a>
<a href="#">4-3</a>
</div>
</div>
</div>
<div class="hr-menu right">
<a class="item">任务</a>
<a class="item">通知</a>
<a class="item">消息</a>
<div class="avatar right">
<a class="item" href="#">
<img src="/static/imgs/avatar/default.png">
</a>
<div class="sets">
<a href="#">4-1</a>
<a href="#">4-2</a>
<a href="#">4-3</a>
</div>
</div>
</div>
</div>
<div class="pg-body">
<div class="menus">
<div class="item ">
<div class="item-title">标题1</div>
<div class="item-content hide">
<a>文章管理</a>
<a>标签管理</a>
<a>分类管理</a>
</div>
</div>
<div class="item">
<div class="item-title">标题2</div>
<div class="item-content">
<a>文章管理</a>
<a>标签管理</a>
<a>分类管理</a>
</div>
</div >
<div class="item">
<div class="item-title">标题3</div>
<div class="item-content">
<a>文章管理</a>
<a>标签管理</a>
<a>分类管理</a>
</div>
</div>
</div>
<div class="contents">{% block contents %}{% endblock %}</div>
</div>
<div class="pg-footer"></div>
{% block js %}{% endblock %}
</body>
</html>
