用定位布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台布局-定位</title>
<style>
html {
color: #333;
font:normal 12px '微软雅黑','Microsoft YaHei';
}
body,ul,ol,p,h1,h2,h3 {
margin: 0;
padding: 0;
}
ul,ol {
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
html,body,.container{
height: 100%;
}
.container{
position: relative;
}
.top{
height: 120px;
background-color: lightblue;
}
.container > .top > .logo {
font-size: 26px;
line-height: 120px;
padding: 0 2em;
font-weight: bolder;
text-align: center;
}
.content{
position: absolute;
top:120px;
bottom: 0;
width: 100%;
background: #ededed;
}
.content > .left{
width: 200px;
height: 100%;
background-color: #FCEDED;
float: left;
padding-top: 50px;
box-sizing: border-box;
}
.content > .right{
margin-left: 200px;
height: 100%;
padding:1em;
box-sizing: border-box;
}
.content > .right >.wrapper{
height: 100%;
background-color: #fff;
border-radius:5px;
overflow-y: auto;
box-shadow: 0 0 5px #ccc;
}
.content > .left >ul>li{
width: 200px;
background-color: #ADD8E6;
border-top: 1px solid #fff;
line-height: 3em;
text-align: center;
font-size: 15px;
}
.content > .left >ul>li:first-child{
border-top:none;
}
.content > .left >ul>li>a{
color:#fff;
}
.content > .left >ul>li>a:hover{
color: #FF9800;
}
.content > .left >ul>li:hover {
box-shadow: inset 0 0 3px #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
<div class="logo">
智慧校园-学生选课系统
</div>
</div>
<div class="content">
<div class="left">
<ul>
<li><a href="">学生管理</a></li>
<li><a href="">教师管理</a></li>
<li><a href="">课程管理</a></li>
<li><a href="">班级管理</a></li>
</ul>
</div>
<div class="right">
<div class="wrapper">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</div>
</body>
</html>
效果展示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/960371c5af3f0781c9c4eebeb0c6b8fb.png)
flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台布局-flex</title>
<style>
html {
color: #333;
font:normal 12px '微软雅黑','Microsoft YaHei';
}
body,ul,ol,p,h1,h2,h3 {
margin: 0;
padding: 0;
}
ul,ol {
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
html,body,.container{
height: 100%;
}
.container{
display: flex;
flex-direction: column;
}
.top{
flex-basis: 120px;
background-color: lightblue;
}
.container > .top > .logo {
font-size: 26px;
line-height: 120px;
padding: 0 2em;
font-weight: bolder;
text-align: center;
}
.content{
flex-grow: 1;
background: #ededed;
display: flex;
flex-direction: row;
overflow-y: scroll;
}
.content > .left{
flex-basis: 200px;
padding-top: 50px;
background-color: #FCEDED;
}
.content > .right{
flex-grow: 1;
padding:1em;
box-sizing: border-box;
}
.content > .right >.wrapper{
height: 100%;
background-color: #fff;
border-radius:5px;
overflow-y: auto;
box-shadow: 0 0 5px #ccc;
}
.content > .left >ul>li{
width: 200px;
background-color: #ADD8E6;
border-top: 1px solid #fff;
line-height: 3em;
text-align: center;
font-size: 15px;
}
.content > .left >ul>li:first-child{
border-top:none;
}
.content > .left >ul>li>a{
color:#fff;
}
.content > .left >ul>li>a:hover{
color: #FF9800;
}
.content > .left >ul>li:hover {
box-shadow: inset 0 0 3px #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
<div class="logo">
智慧校园-学生选课系统
</div>
</div>
<div class="content">
<div class="left">
<ul>
<li><a href="">学生管理</a></li>
<li><a href="">教师管理</a></li>
<li><a href="">课程管理</a></li>
<li><a href="">班级管理</a></li>
</ul>
</div>
<div class="right">
<div class="wrapper">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</div>
</body>
</html>
效果展示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f31d666bdc04ab4fca6f8e7dc9dedf63.png)