html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="__PUBLIC__/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/bootstrap.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/install.js"></script>
<link rel="stylesheet" href="__PUBLIC__/css/bootstrap.min.css" />
<link rel="stylesheet" href="__PUBLIC__/css/style.css" />
</head>
<body>
<div class="page-con">
<div class="page-left color-vh">
<a href="#" class="logo-con">
<img src="__PUBLIC__/images/logo.png">
</a>
<a href="#" class="left-con a-black">
<span class="glyphicon glyphicon-user"></span>
<i>人员总览</i>
</a>
<a href="#" class="left-con a-black">
<span class="glyphicon glyphicon-star"></span>
<i>角色设置</i>
</a>
<a href="#" class="left-con a-black">
<span class="glyphicon glyphicon-tower"></span>
<i>权限设置</i>
</a>
</div>
<script>
var url_end=(window.location.pathname).split("/")[3];
$("#"+url_end).addClass("active");
</script>
<div class="page-right">
<div class="page-right-top">
<div class="p-r-t-left">
<button class="xbtn xbtn-trans">
<span class="glyphicon glyphicon-th"></span>
</button>
</div>
<div class="p-r-t-right">
<button class="xbtn xbtn-trans">通知</button>
<button class="xbtn xbtn-trans">账户</button>
</div>
</div>
<div class="page-right-title">
人员总览
</div>
<div class="page-right-main">
</div>
</div>
</div>
</body>
</html>
CSS
@CHARSET "UTF-8";
/*公用*/
body{
background:#fafafa;
position:absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
font-family:Trebuchet MS,"微软雅黑";
}
.auto-center{margin:auto;left:0;right:0;}
.auto-middle{margin:auto;top:0;bottom:0;}
a,a:hover,a:visited,a:focus,a:link{text-decoration:none;}
i{font-style:normal;}
/*配色*/
.xbtn{
height:30px;
line-height:30px;
min-width:80px;
padding:0 5px;
border:1px solid transparent;
}
.xbtn-success{background:#64C5AB;color:#fff;border-color:#64C5AB;}
.xbtn-warming{background:#FF9466;color:#fff;border-color:#FF9466;}
.xbtn-danger{background:#FF6D6E;color:#fff;border-color:#FF6D6E;}
.xbtn-info{background:#00d5ec;color:#fff;border-color:#00d5ec;}
.xbtn-black{background:#1B1E25;color:#fff;border-color:#fff;}
.xbtn-black:hover{background:#fefefe;color:#1B1E25;border-color:#1B1E25;}
.xbtn-trans{background:transparent;color:#666;border-color:transparent;}
.color-vl{}
.color-l{}
.color-m{}
.color-h{background:#303543;}
.color-vh{background:#1B1E25;}
.a-black{
background:#1B1E25;
color:#fff;
}
.a-black span{
color:#1B1E25;
text-shadow:#fff 1px 0 0,#fff 0 1px 0,#fff -1px 0 0,#fff 0 -1px 0;
}
.a-black:hover,.a-black.active{background:#303543;color:#fff;}
.a-black:hover span,.a-black.active span{color:#303543;}
/*login*/
/*login-bg*/
.login-background{
background:#1B1E25;
height:100%;
width:100%;
display:block;
display: -webkit-flex; /* Safari */
display: flex;
flex-direction:column-reverse;
}
.login-background > *:not(.footer-con){
position:absolute;
margin:auto;
top:0;
bottom:0;
}
.login-bg{
height:90%;
width:100%;
display:block;
overflow:hidden;
}
@media screen and (min-width:1201px){
.login-bg img{width:100%;}
}
@media screen and (max-width:1200px){
.login-bg img{height:100%;}
}
/*login-main*/
.login-main{
width:300px;
height:420px;
background:rgba(0,0,0,.9);
position:absolute;
right:20%;
}
.login-main .logo-con{
height:80px;
width:80px;
position:relative;
margin:30px auto;
display:block;
}
.login-main .logo-con img{
width:100%;
height:100%;
}
.login-main form{
display: -webkit-flex; /* Safari */
display: flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.login-main form :not([type="submit"]):not(span){
background:transparent;
border:none;
border-bottom:1px solid #999;
width:80%;
height:30px;
line-height:30px;
font-size:16px;
color:#bbb;
padding:0 10px
}
.login-main form span{
margin-top:10px;
color:#eee;
font-weight:bold;
font-size:18px;
}
.login-main form [type="submit"]{
margin-top:30px;
width:60%;
}
/*footer*/
.footer-con{
color:#999;
height:40px !important;
line-height:40px;
text-align:center;
}
/*con*/
.logo-con{
width:100%;
height:60px;
line-height:60px;
text-align:center;
}
.logo-con img{
width:40px;
}
.page-con{
display:-webkit-flex;
display:flex;
flex-flow:row nowrap;
justify-content:space-between;
align-items:stretch;
height:100%;
}
.page-left{
height:100%;
width:60px;
display:-webkit-flex;
display:flex;
flex-flow:column nowrap;
justify-content:flex-start;
background:
}
.left-con{
height:60px;
white-space:nowrap;
box-sizing:border-box;
line-height:60px;
overflow:hidden;
}
.page-left:hover {
width:200px;
}
.left-con span{
font-size:18px;
margin:20px;
}
.page-right{
height:100%;
width:auto;
display:-webkit-flex;
display:flex;
flex-grow:1;
flex-flow:column nowrap;
}
.page-right-top{
width:100%;
display:-webkit-flex;
display:flex;
justify-content:space-between;
background:#fff;
height:30px;
}
.page-right-title{
border-bottom:1px double #2ABBAE;
background:#fff;
color:#333;
height:30px;
line-height:30px;
text-align:center;
}
.page-right-main{
display:-webkit-flex;
display:flex;
width:100%;
flex-grow:1;
}