简介
页面布局是一个让人头大的问题，今天好好研究一下
参考页面
https://www.runoob.com/try/try.php?filename=tryhtml_layout_divs
https://blog.csdn.net/wkj001/article/details/102881080
code html
<!--
* @Author: your name
* @Date: 2020-04-09 11:54:13
* @LastEditTime: 2020-04-09 14:57:39
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: incubator-echarts-4.7.0learn est.html
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面布局</title>
<link rel="stylesheet" type="text/css" href="testStyle.css" />
</head>
<body>
<div class="container">
<div class="box">
<div class="header">
<span>header</span>
</div>
<div class="content">
<div class="content_menu">菜单</div>
<div class="content_body">body</div>
<div class="content_footer">footer</div>
</div>
</div>
</div>
</body>
</html>
code css
.box{
clear:both;
auto;
margin:0 auto;
height: auto;
text-align: center;
font-size:0;
/* line-height: 60px; */
}
.container{
margin:0 auto;
}
.header{
90%;
/* height:30px; */
height:30px;
background: orange;
margin: 0 auto;
font-size: 14px;
}
.header span{
display:block;
text-align: center;
line-height: 30px;
}
.content{
position: relative;
100%;
margin:0 auto;
font-size: 0;
}
.content_menu{
/* position: relative; */
20%;
height:480px;
display: inline-flex;
background-color: aqua;
font-size: 14px;;
}
.content_body{
/* position: relative; */
70%;
height:480px;
background: olive;
display: inline-flex;
font-size: 14px;;
/* margin-left: 0; */
}
.content_footer{
position: relative;
background: orangered;
90%;
margin: 0 auto;
font-size: 14px;;
}