Holy Grail Layout refers to one of the most common site layouts.From top to bottom, the page is divided into three sections: the header, the body, and the footer.The trunk is divided horizontally into three columns, from left to right: navigation, main bar, secondary bar.
WeChat Applet Exchange Group: 111733917 | Wechat Applet 0 Foundation to Employment Course: https://edu.csdn.net/topic/huangjuhua
The HTML code is as follows
<body class="HolyGrail">
<header>...</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">...</main>
<nav class="HolyGrail-nav">...</nav>
<aside class="HolyGrail-ads">...</aside>
</div>
<footer>...</footer>
</body>
The CSS code is as follows
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,
footer {
flex: 1;
}
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
}
.HolyGrail-nav, .HolyGrail-ads {
/* Set the width of the two sidebars to 12em */
flex: 0 0 12em;
}
.HolyGrail-nav {
/* Navigate to the leftmost side */
order: -1;
}
Actual Warfare Effect Graphics
Actual Code
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grail Layout</title>
</head>
<style>
.rongqi{display:flex; flex-direction:column; background-color:#9CF; min-height:100vh;}
.tou{ background-color:#CCC; height:60px;}
.zhong{ background-color:#396;flex:1; display:flex;}
.di{ background-color:#999; height:60px;}
.c01{ background-color:#FC3;}
.c02{ background-color:#C63; flex:1;}
.c03{ background-color:#C6C;}
</style>
<body class="rongqi">
<div class="tou">head</div>
<div class="zhong">
<div class="c01">left</div>
<div class="c02">
Grail layout ( Holy Grail Layout)Refers to one of the most common site layouts.From top to bottom, the page is divided into three sections: the header ( header)，Trunk ( body)，Tail ( footer). The trunk is divided horizontally into three columns, from left to right: navigation, main bar, secondary bar.
</div>
<div class="c03">Right</div>
</div>
<div class="di">bottom</div>
</body>
</html>
Welcome to my video course: Flex Box Page Layout Actual Course
