最终样式:
![](https://i-blog.csdnimg.cn/blog_migrate/6ca765513c817965b916cb7a868ca463.png)
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>管理</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="app">
<div id ="title"> 标题 </div>
<div id ="menu"> 菜单 </div>
<div id="content"> 正文 </div>
</body>
</html>
CSS代码:
/* 缺少的body的修改的话,和浏览器边缘会有一些空隙,而且会有横向进度条 */
body {
margin: 0;
background: #eeeeee;
}
#title {
position: absolute;
width: 100%;
height: 10%;
background: #23262e;
color: white;
font-size: 40px;
/* 以下三条属性让标题内文字居中 */
display: flex;
align-items: center;
justify-content: center;
}
#menu {
position: absolute;
width: 15%;
height: 90%;
top: 10%;
color: white;
font-size: 20px;
background: #324157;
}
#content {
position: absolute;
width: 85%;
height: 90%;
top: 10%;
left: 15%;
background: #eeeeee;
}