zan-admin响应式简单布局
祝嘉懿
#zan-body * {
outline: none !important;
}
#zan-body a{
text-decoration: none;
}
#zan-body ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/* 头部样式 */
.zan-header {
position: fixed;
left: 240px;
right: 0;
top: 0;
background-color: #ffffff;
height: 64px;
border-bottom: 1px solid #e7e7e7;
}
/* 侧边栏 */
.zan-aside {
background-color: #ffffff;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 240px;
border-right: 1px solid #e7e7e7;
}
/* 品牌 */
.zan-brand {
height: 64px;
border-bottom: 1px solid #e7e7e7;
}
/* 侧边栏菜单 */
.zan-sidebar {
position: absolute;
top: 64px;
bottom: 0;
left: 0;
right: 0;
}
/* 面包屑 */
.zan-breadcrumb{
position: fixed;
top: 64px;
left: 240px;
right: 0;
margin: 0;
border-radius: 0;
border-bottom: 1px solid #e7e7e7;
background-color: #ffffff;
}
/* 内容区域 */
.zan-main{
padding-top: 120px;
padding-left: 240px;
}
/* 小于等于1200px */
@media screen and (max-width: 1200px) {
.zan-header {
left: 0;
}
.zan-aside {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.zan-breadcrumb{
left: 0;
}
.zan-main{
padding-left: 0;
}
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>zan-admin后台管理系统模板</title>
<meta name="keywords" content="zan-admin,zan-admin后台模版">
<meta name="description" content="zan-admin基于bootstrap3.4.1的高颜值响应式的后台管理系统模板">
<meta name="author" content="代码当酒喝">
<link rel="icon" href="favicon.ico" type="image/ico">
<script src="static/js/zan-guard.min.js"></script>
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href="static/css/zan-admin.min.css" rel="stylesheet">
</head>
<body id="zan-body">
<!-- 头部 -->
<header class="zan-header">
789
</header>
<!-- 侧边栏 -->
<aside class="zan-aside">
<div class="zan-brand">zan-admin</div>
<ul class="zan-sidebar">
<li>456</li>
<li>456</li>
<li>456</li>
<li>456</li>
<li>456</li>
<li>456</li>
</ul>
</aside>
<!-- 面包屑 -->
<ol class="breadcrumb zan-breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
<!-- 内容区 -->
<main class="zan-main">
<div class="container-fluid">
内容
</div>
</main>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/zan-admin.min.js"></script>
</body>
</html>
类似资料：