Step-by-step tutorial on the classic three-column layout of the Holy Grail-PHP Tutorial-php.cn

Home

Backend Development

PHP Tutorial

Step-by-step tutorial on the classic three-column layout of the Holy Grail

天蓬老师

Aug 18, 2018 pm 01:55 PM

holy grail layout

Compared with "Shuangfeiji Layout", the DOM structure of the Holy Grail layout is simpler and more elegant. The final rendering:
Step-by-step tutorial on the classic three-column layout of the Holy Grail

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

How can you protect against Cross-Site Scripting (XSS) attacks related to sessions?Apr 23, 2025 am 12:16 AM

To protect the application from session-related XSS attacks, the following measures are required: 1. Set the HttpOnly and Secure flags to protect the session cookies. 2. Export codes for all user inputs. 3. Implement content security policy (CSP) to limit script sources. Through these policies, session-related XSS attacks can be effectively protected and user data can be ensured.

How can you optimize PHP session performance?Apr 23, 2025 am 12:13 AM

Methods to optimize PHP session performance include: 1. Delay session start, 2. Use database to store sessions, 3. Compress session data, 4. Manage session life cycle, and 5. Implement session sharing. These strategies can significantly improve the efficiency of applications in high concurrency environments.

What is the session.gc_maxlifetime configuration setting?Apr 23, 2025 am 12:10 AM

Thesession.gc_maxlifetimesettinginPHPdeterminesthelifespanofsessiondata,setinseconds.1)It'sconfiguredinphp.iniorviaini_set().2)Abalanceisneededtoavoidperformanceissuesandunexpectedlogouts.3)PHP'sgarbagecollectionisprobabilistic,influencedbygc_probabi

How do you configure the session name in PHP?Apr 23, 2025 am 12:08 AM

In PHP, you can use the session_name() function to configure the session name. The specific steps are as follows: 1. Use the session_name() function to set the session name, such as session_name("my_session"). 2. After setting the session name, call session_start() to start the session. Configuring session names can avoid session data conflicts between multiple applications and enhance security, but pay attention to the uniqueness, security, length and setting timing of session names.

How often should you regenerate session IDs?Apr 23, 2025 am 12:03 AM

The session ID should be regenerated regularly at login, before sensitive operations, and every 30 minutes. 1. Regenerate the session ID when logging in to prevent session fixed attacks. 2. Regenerate before sensitive operations to improve safety. 3. Regular regeneration reduces long-term utilization risks, but the user experience needs to be weighed.

How do you set the session cookie parameters in PHP?Apr 22, 2025 pm 05:33 PM

Setting session cookie parameters in PHP can be achieved through the session_set_cookie_params() function. 1) Use this function to set parameters, such as expiration time, path, domain name, security flag, etc.; 2) Call session_start() to make the parameters take effect; 3) Dynamically adjust parameters according to needs, such as user login status; 4) Pay attention to setting secure and httponly flags to improve security.

What is the main purpose of using sessions in PHP?Apr 22, 2025 pm 05:25 PM

The main purpose of using sessions in PHP is to maintain the status of the user between different pages. 1) The session is started through the session_start() function, creating a unique session ID and storing it in the user cookie. 2) Session data is saved on the server, allowing data to be passed between different requests, such as login status and shopping cart content.

How can you share sessions across subdomains?Apr 22, 2025 pm 05:21 PM

How to share a session between subdomains? Implemented by setting session cookies for common domain names. 1. Set the domain of the session cookie to .example.com on the server side. 2. Choose the appropriate session storage method, such as memory, database or distributed cache. 3. Pass the session ID through cookies, and the server retrieves and updates the session data based on the ID.

See all articles