@今天有点灵感
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>工字型布局</title>
<link href="../css/base.css " rel="stylesheet">
<style type="text/css">
.warp_panel{
height: 100%;
width: 100%;
background-color: #0062CC;
display:flex;
flex-flow: column;
justify-concent:center;
align-items:center;
}
.top_penel{
height: 10%;
width: 100%;
background-color: #F0AD4E
}
.mid_panel{
height:80%;
width:80%;
background-color:#2AC845;
}
.btm_panel{
height: 10%;
width: 100%;
background-color: #777777;
}
</style>
</head>
<body>
<div class="warp_panel">
<div class="top_penel"></div>
<div class="mid_panel"></div>
<div class="btm_panel"></div>
</div>
</body>
</html>