基本后台模版（html）
2018-06-01 本文已影响267人
两分与桥
基本的后台模版，包含了几个block，效果看起来挺不错的，以后留着用了。
小图标用的是 font-awesome 和 bootstrap，其他的效果基本都是大同小异
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/bootstrap/bootstrap.css">
<link rel="stylesheet" href="/static/font-awesome/css/font-awesome.css">
{% block css %}{% endblock %}
<style>
body{
margin: 0;
}
.pg-header{
background-color: #2f72ab;
height: 48px;
min-width: 1100px;
line-height: 48px;
font-size: 13px;
}
.left{
float: left;
}
.right{
float: right;
}
.hide{
display: none;
}
.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{
padding: 0 10px;
color: white;
height: 48px;
display: inline-block;
}
a{
text-decoration: none !important;
}
.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 .set{
position: absolute;
background-color: aliceblue;
border: 1px solid red;
display: none;
width: 150px;
}
.pg-header .hl-menu .item-set .set a{
line-height: 30px;
display: block;
}
.pg-header .hl-menu .item-set:hover .set{
display: block;
}
.avatar{
position: relative;
display: inline-block;
}
.avatar .set{
position: absolute;
width: 150px;
border: 1px solid red;
background: aliceblue;
left: -90px;
top: 48px;
display: none;
}
.avatar .set a{
display: block;
}
.avatar img{
margin-top: 4px;
border-radius: 50%;
}
.avatar:hover .set{
display: block;
}
.pg-header .hr-menu .item .bg-danger{
background-color: #d9534f !important;
}
.pg-header .hr-menu .item .bg-success{
background-color: #5cb85c !important;
}
.pg-body .menu{
width: 200px;
position: absolute;
top: 48px;
left: 0;
bottom: 0;
overflow: scroll;
}
.pg-body .contents{
{# background-color: navajowhite;#}
position: absolute;
top: 48px;
bottom: 0;
left: 205px;
right: 0;
overflow: scroll; // 这个是出现滚动条的
}
.pg-body .menu .item{
font-size: 16px;
}
.pg-body .menu .item .item-title{
background-color: lightgrey;
padding: 8px;
}
.pg-body .menu .item .item-content a{
display: block;
padding: 3px;
border: 3px solid transparent;
}
.pg-body .menu .item .item-content a:hover{
border: 3px solid black;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">城管你说话</div>
<div class="hl-menu left">
<a href="#" class="item">菜单一</a>
<a href="#" class="item">菜单二</a>
<a href="#" class="item">菜单三</a>
<div class="item-set">
<a href="" class="item">菜单四</a>
<div class="set">
<a href="#">菜单四-1</a>
<a href="#">菜单四-2</a>
<a href="#">菜单四-3</a>
</div>
</div>
</div>
<div class="hr-menu right">
<a href="" class="item">
消息
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<span class="badge bg-success">2</span>
</a>
<a href="" class="item">
通知
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<span class="badge bg-success">2</span>
</a>
<a href="" class="item">
任务
<i class="fa fa-bell-o" aria-hidden="true"></i>
<span class="badge bg-danger">4</span>
</a>
<div class="avatar right">
<a href="" class="item">
<img src="/static/imgs/default.png" alt="">
</a>
<div class="set">
<a href="#">菜单四-1</a>
<a href="#">菜单四-2</a>
<a href="#">菜单四-3</a>
</div>
</div>
</div>
</div>
<div class="pg-body">
<div class="menu">
<div class="item">
<div class="item-title">标题一</div>
<div class="item-content">
<a href="">
<i class="fa fa-cogs" aria-hidden="true"></i>
<span>文章管理</span>
</a>
<a href="">
<i class="fa fa-cogs" aria-hidden="true"></i>
<span>标签管理</span>
</a>
<a href="">
<i class="fa fa-cogs" aria-hidden="true"></i>
<span>分类管理</span>
</a>
</div>
</div>
<div class="item">
<div class="item-title">标题二</div>
<div class="item-content">
<a href="">
<i class="fa fa-cogs" aria-hidden="true"></i>
<span>文章管理</span>
</a>
<a href="">
<i class="fa fa-cogs" aria-hidden="true"></i>
<span>标签管理</span>
</a>
<a href="">
<i class="fa fa-cogs" aria-hidden="true"></i>
<span>分类管理</span>
</a>
</div>
</div>
<div class="item">
<div class="item-title">标题三</div>
<div class="item-content">
<a href="">
<i class="fa fa-cogs" aria-hidden="true"></i>
<span>文章管理</span>
</a>
<a href="">
<i class="fa fa-cogs" aria-hidden="true"></i>
<span>标签管理</span>
</a>
<a href="">
<i class="fa fa-cogs" aria-hidden="true"></i>
<span>分类管理</span>
</a>
</div>
</div>
</div>
<div class="contents"></div>
{% block contents %}{% endblock %}
</div>
</body>
<div class="pg-footer"></div>
{% block js %}{% endblock %}
</html>
效果图：：
1.png
