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;
}
{#設(shè)置頭部邊欄的高度井氢，顏色，最小寬度，必成一正行讓文字居中#}
.pg-header{
height: 48px;
background-color: #2f72ab;
min-width: 1100px;
line-height: 48px;
}
{#設(shè)置logo的展示#}
.pg-header .logo{
color: white;
font-size: 24px;
width: 200px;
background-color: #1c5a9c;
text-align: center;
}
{# 設(shè)置頭部左右菜單的展示 #}
.pg-header .hl-menu .item, .pg-header .hr-menu .item{
color: white;
padding: 0 10px;
height: 48px;
display: inline-block;
}
{#設(shè)置左右頭部菜單選中的展示#}
.pg-header .hl-menu .item:hover,.pg-header .hr-menu .item:hover{
background-color: #1c5a9c;
}
{#設(shè)置下拉的頭部標(biāo)簽設(shè)置#}
.pg-header .hl-menu .item-set{
display: inline-block;
position: relative
}
{#設(shè)置下拉框后的樣式#}
.pg-header .hl-menu .item-set .sets{
position: absolute;
width: 150px;
background-color: aliceblue;
border: 1px solid #dddddd;
display: none;
z-index: 100;
}
{#設(shè)置下拉框#}
.pg-header .hl-menu .item-set .sets a{
display: block;
line-height: 30px;
}
{#設(shè)置格式#}
.pg-header .hl-menu .item-set:hover .sets{
display: block;
}
.avatar{
display: inline-block;
position: relative;
}
.avatar img{
margin-top: 4px;
border-radius: 50%;
}
{# 設(shè)置頭像的菜單的下拉 #}
.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>
{#出現(xiàn)隱藏下拉選項 用這種#}
<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">任務(wù)</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">標(biāo)題1</div>
<div class="item-content hide">
<a>文章管理</a>
<a>標(biāo)簽管理</a>
<a>分類管理</a>
</div>
</div>
<div class="item">
<div class="item-title">標(biāo)題2</div>
<div class="item-content">
<a>文章管理</a>
<a>標(biāo)簽管理</a>
<a>分類管理</a>
</div>
</div >
<div class="item">
<div class="item-title">標(biāo)題3</div>
<div class="item-content">
<a>文章管理</a>
<a>標(biāo)簽管理</a>
<a>分類管理</a>
</div>
</div>
</div>
<div class="contents">{% block contents %}{% endblock %}</div>
</div>
<div class="pg-footer"></div>
{% block js %}{% endblock %}
</body>
</html>
