Home > Article > Backend Development > Step-by-step tutorial on the classic three-column layout of the Holy Grail
Step-by-step tutorial on the classic three-column layout of the Holy Grail
- 天蓬老师Original
- 2018-08-18 13:55:152184browse
Compared with "Shuangfeiji Layout", the DOM structure of the Holy Grail layout is simpler and more elegant. The final rendering: 
The following is the Holy Grail The core code of the layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯</title>
<style>
.header, .footer {
width: 100%;
height: 60px;
background-color: #aaa;
}
.content {
width: 1000px;
min-height: 100%;
margin: auto;
text-align: center;
line-height: 60px;
background-color: #eee;
}
.container {
width: 600px;
margin: auto;
overflow: hidden;
padding: 0 200px;
background-color: yellow;
}
.main {
width: 100%;
min-height: 650px;
background-color: #66CCFF;
float:left;
}
.left {
width: 200px;
min-height: 650px;
background-color: #FD6FCF;
float:left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 200px;
min-height: 650px;
background-color: #FC0107;
float:left;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
</head>
<body>
<div class="header">
<div class="content">header</div>
</div>
<div class="container">
<div class="main">主要内容区</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer">
<div class="content">footer</div>
</div>
</body>Below I will explain the contents of the code to you one by one:
The first step: Create the DOM structure:
The basic principle is :
1. There are three parts: the header, the middle and the bottom. The middle area is the main body of the page, which is completed with a three-column layout;
2. Among the three middle columns, the middle is the main body of the display, which must be placed in front and rendered first to improve the user experience. Experience;
<!--1.头部:--> <div class="header"> <div class="content">header</div> </div> <!--2.中间主体:--> <div class="container"> <div class="main">主要内容区</div> <div class="left">左边</div> <div class="right">右边</div> </div> <!--3.底部:--> <div class="footer"> <div class="content">footer</div> </div>
Step 2: Write out the common styles at the head and tail of the page [written in the
.header, .footer {
width: 100%;
height: 60px;
background-color: #aaa;
}
.content {
width: 1000px;
min-height: 100%;
margin: auto;
text-align: center;
line-height: 60px;
background-color: #eee;
}
Detailed explanation:
1. First set the common style of the header and bottom:
(1)width:100%; The width is the same as the page width: 100%, and it will automatically expand;
(2)height:60px; The height is temporarily set to 60 pixels. If it is not enough, you can adjust it;
(3)background-color: #aaa; Set the background reference color, you can decide whether to keep it according to your needs;
2 .Set the style of the header and bottom content areas:
(1)width:1000px; Make the public content area smaller and set it to a fixed width to facilitate content filling;
(2)min-height:100% ; Set the minimum height to ensure the page layout is complete, and automatically use the parent height of 60px;
(3)margin: auto; The content of the public content area is also a block, center it in the parent container, and use margin;
(4)text-align:center; Internal text is centered horizontally;
(5)line-height: 60%; Internal single-line text is vertically centered;
(6)background-color:#eee; Set background Reference color, determine whether to keep it according to the situation;
Step 3: Set the style of the intermediate body container:
.container {
width: 600px;
margin: auto;
overflow: hidden;
padding: 0 200px;
background-color: yellow;
}
Detailed explanation:
1.width: 600px;
Set the total width of the parent container of the three-column layout to 600px. Why is it 600 pixels? Because the total width of my page is 1000px, and the width of the left and right sides is 200px.
So the middle part is 600px. Setting the total width of the container to 600px has two functions: 1. It is used for inheritance in the middle block, and 2. it can be expanded through padding.
So don’t worry about 600px, which cannot cover three columns of content;
2.margin: auto; Center the parent container in the current window;
3.overflow: hidden; Because I need to use floating content for the next three columns, in order to allow the parent container to wrap the child block, it will not If height collapse occurs, overflow hiding should be set here;
4.padding: 0 200px;
This statement has two functions:
(1) Set the inner margin padding, which can make the left and right sides of the current container The width is each expanded by 200px, that is, 400px. At this time, the total width of the container is 1000px;
(2) The space after the container width is expanded is actually the space reserved for the left and right columns of sidebars, otherwise the left and right columns It cannot be displayed;
5.background-color: yellow; Set the background reference color to view the current three-column layout, which will eventually be deleted or changed;
Fourth Step: Set the middle content area in the three columns
.main {
width: 100%;
min-height: 650px;
background-color: #6CF;
float:left;
}
Detailed explanation:
1.width: 100%; The middle width is 100%, which is actually 600px, occupying the entire current container Content area space (excluding padding’s 400px);
2.min-height: 650px; Set a minimum height so that when there is not much content, sufficient height can still be displayed without affecting the overall beauty and user experience of the page;
3.background-color: #6cf; Set the reference background color and decide whether to keep it according to your needs;
4.float: left; It is very important to float the middle block out of the document flow and occupy it. All content areas, at this time the left and right blocks will automatically fill in and move up;
Step 5: Set the display style of the left column
.left {
width: 200px;
min-height: 650px;
background-color: #FD6FCF;
float:left;
margin-left: -100%;
position: relative;
left: -200px;
}
Detailed explanation:
1.width: 200px; The width of the left column is 200px, which is the same as the padding width reserved in the container;
2.min-height: 650px; The width is consistent with the middle column, of course you can also Inconsistent;
3.background-color: #fd6fcf; Background reference color, decide whether to keep it according to the situation;
4.float: left; Very important, it floats out of the document flow, because the width of the middle block is 100% , so it will be squeezed below;
5.margin-left: -100%; Move the left column to the left padding reserved by the parent container by setting negative margins;
Note -100% , equivalent to: -600px, because the current width of the parent container.container is 600. Setting a negative value means pulling elements in the opposite direction
But at this time, the left column will occupy the 200px position on the left side of the middle content area;
6.position: relative; Set the positioning method of the elements in the left column to: relative positioning, relative to the original position, still in the document flow.
7.left: -200px; Negative values move to the left,, Move the left column to the padding-left area of the container container. Note,
If the padding of the container container is not set, you will not see the left column.
Sixth Step: Set the display style of the right column
.right {
width: 200px;
min-height: 650px;
background-color: #FC0107;
float:left;
margin-left: -200px;
position: relative;
right: -200px;
}
1.right: 200px; 宽度与左列相同,均为200px;
2.min-height: 650px; 最小高度与左列一致;
3.background-color: #fc0107; 设置参考背景色;
4.float: left; 设置左浮动,脱离文档流后,对它重新进行排列;
5.margin-left: -200px; 向反方向上移200px,其实就是与中间列并排显示;
6.position: relative; 设置相对定位
7.right: -200px; 将右列移动到容器的padding-right区域内
到此为止,圣杯布局完成~~
聪明的你,学会了吗?
The above is the detailed content of Step-by-step tutorial on the classic three-column layout of the Holy Grail. For more information, please follow other related articles on the PHP Chinese website!