Dry! All kinds of common layout + well-known site instance analysis

Common layout of various pages + analysis of well-known sites + relevant reading recommendations

Must see before You Read: This article summarizes the various common layout implementations, with an analysis of the pros and cons of each approach to be added to Github over time. There are other layouts not mentioned in this article, I will update them on Github when I think of them or come across them.

Due to the length of the article, the layout is a bit chaotic, I hope you don’t mind. Nuggets PC side is automatically generated directory, in order to facilitate mobile terminal reading, but also specially made an anchor directory, a title rewrite, really tired! (== later it was found that the title of the article was processed by the Nuggets, and the anchor point did not take effect. If there is no problem on other websites, the mobile terminal can go into github’s online demo to read). If you have any questions or comments, please feel free to comment! Welcome to collect! Welcome to Star!

The from making github.com/Sweet-KK/cs… This article is original, reprint please indicate the source, the abstract drainage is optional.

One, horizontal center

Chapter 1, chapter 2, and Chapter 3 are all simple structures of parent+son. The HTML code and renderings are not posted until chapter 4

(1) Text/line element/line block level element ▲

How it works: text-align only controls how the inline content (text, inline elements, inline block-level elements) aligns with its block parent

#parent{
    text-align: center;
}
Copy the code

The advantages and disadvantages

Advantages: simple and quick, easy to understand, compatibility is very good
Disadvantages: only valid for in-line content; Attributes inherit to affect the contents of subsequent lines; If the child element width is greater than the width of the parent element, the child element is horizontally centered only if the width of the descendant line content is smaller than the width of the element with the text-align attribute set

(2) Single block-level element ▲

Principle: According to the specification, it is very clear that there is such a situation: when the margin has savings, if auto is set on the left and right margin, the remaining space will be evenly divided. In addition, if the margin above and below is set to auto, its calculated value is 0

#son{width: 100px; /* margin: 0 auto; }Copy the code

The advantages and disadvantages

Advantages: simple; Good compatibility
Disadvantages: Must be fixed width, and the value cannot be auto; The width must be smaller than the parent element, otherwise invalid

(3) Multiple block-level elements

How it works: text-align only controls how the inline content (text, inline elements, inline block-level elements) aligns with its block parent

#parent{text-align: center; } .son{ display: inline-block; /* Change to line-level or line-level block-level, so that text-align is valid */}Copy the code

The advantages and disadvantages

Advantages: Simple, easy to understand, very good compatibility
Disadvantages: only valid for in-line content; Attributes inherit to affect the contents of subsequent lines; Block level changes to inline-block newlines and Spaces create element spacing

(4) Use absolute positioning ▲

Principle: The values of top, right, bottom and left are relative to the size of the parent element, while the values of margin or transform are relative to their own size, so as to achieve the purpose of horizontal center when used in combination

#parent{height: 200px; width: 200px; /* fixed width */ position: relative; /* parent */ background-color:#f00;
}
#son{position: absolute; /* left: 50%; /* Left :100px*/ transform: translateX(-50%); Margin-left: -50px; margin-left: -50px; margin-left: -50px; */ width: 100px; /* height: 100px; background-color:#00ff00;
}
Copy the code

The advantages and disadvantages

Advantages: Good compatibility with margin-left; Both block-level and inline elements can be implemented
Disadvantages: more code; Out of the document flow; To use margin-left, you need to know the width; Poor compatibility with Transform (IE9 +)

(5) Any element (Flex)

Principle: Is to set the current spindle alignment mode to center. I don’t know why, flex is nothing more than the main axis side axis is the focus, and then the arrangement is set, you can see the end of the article flex reading recommendations

#parent{
    display: flex;
    justify-content: center;
}
Copy the code

The advantages and disadvantages

Advantages: Powerful; Simple and convenient; Easy to understand
Disadvantages: poor PC compatibility, mobile (Android4.0+)

Summary of this chapter:

For horizontal centering, we should first consider which elements have a built-in centering effect, which should come to mind firsttext-align:centerBut this only works for inline content, so we’re going to use ittext-align:centerYou must set the child element todisplay: inline;ordisplay: inline-block; ；
The second is to consider whether it can be usedmargin: 0 auto;“, because this is one or two lines of code can be done, it is not possible to use absolute positioning to achieve.
Flex for mobile use flex, simple, flexible and powerful, worthy of a great tool for web layout!

Two, vertical center

Chapter 1, chapter 2, and Chapter 3 are all simple structures of parent+son. The HTML code and renderings are not posted until chapter 4

(1) Single-line text/inline element/inline block-level element ▲

How it works: The final expression of line-height is achieved by an inline box, which occupies a space perpendicular to the same level as the text regardless of the height (whether larger or smaller than the text).

#parent{height: 150px; line-height: 150px; /* * * * */Copy the code

The advantages and disadvantages

Advantages: simple; Good compatibility
Disadvantages: can only be used for single-line content; You know what the height is

(2) Multi-line text/inline elements/inline block-level elements

The principle of same

#parent{/* Or wrap all the text around a span and set display: inline-block to an image to resolve */height: 150px; line-height: 30px; /* The element is rendered in 5 lines, and the value of line-height is height/5*/}Copy the code

The advantages and disadvantages

Advantages: simple; Good compatibility
Disadvantages: can only be used for inline content; To calculate line-height, you need to know the height and how many lines are rendered. It is recommended to wrap multiple lines of text in spans

(3) the pictures bring about

Principle: Vertical-align and line-height gay friendship

#parent{
    height: 150px;
    line-height: 150px;
    font-size: 0;
}
img#son{vertical-align: middle; } /* Default is baseline alignment, change to middle*/
Copy the code

The advantages and disadvantages

Advantages: simple; Good compatibility
Disadvantages: need to add font: 0; Can be completely vertically centered; But the main thing is that html#parent wraps img with a line break or space between them

(4) Single block-level element

HTML code:

<div id="parent">
    <div id="son"></div>
</div>
Copy the code

(4-1) Tabel-cell is used to achieve:

#parent{
    display: table-cell;
    vertical-align: middle;
}
Copy the code

The advantages and disadvantages

Advantages: simple; Width and height variable; Good compatibility (IE8 +)
Disadvantages: set tabl-cell element, width and height values set percentage is invalid, need to set its parent element display: table; To come into force; Table-cell is not aware of margin. Setting table-row and other attributes on the parent element will also make it not aware of height. Setting float or position breaks the default layout. Consider adding a parent div that defines properties such as float. Content overflows automatically prop up the parent element

(4-2) Using absolute positioning :▲

/* The values of top, right, bottom, and left are relative to the size of the parent element, while the values of margin or transform are relative to the size of the parent element#parent{height: 150px; position: relative; /* Parent */}#son{position: absolute; /* * * */ top: 50%; /* The parent element is half the height, which is equivalent to top:75px; */ transform: translateY(-50%); Margin-top :-25px; margin-top:-25px; */ height: 50px; } /* Advantages and disadvantages - advantages: margin-top compatibility; Both block-level and inline elements can be implemented - Disadvantages: more code; Out of the document flow; To use margin-top, you need to know the height; Principle: When top and bottom are 0,margin-top&bottom will stretch to infinity, fill up the space and split the space */#parent{position: relative; }
#son{position: absolute; margin: auto 0; top: 0; bottom: 0; height: 50px; } /* Advantages and disadvantages - Advantages: simple; Good compatibility (IE8 +) - Disadvantages: Out of document flow */Copy the code

(4-3) Using Flex:

Principle: Flex sets alignment only, please refer to flex at the end of the article to read recommendations

#parent{display: flex; align-items: center; } or#parent{display: flex; }
#son{align-self: center; }Flex extends the upper and lower margin of margin into the remaining space and bisects it */#parent{display: flex; }
#son{margin: auto 0; }
Copy the code

The advantages and disadvantages

Advantages: simple and flexible; powerful
Disadvantages: poor PC compatibility, mobile (Android4.0+)

(5) Any element (Flex)

Principle: Flex sets alignment only, please refer to flex at the end of the article to read recommendations

#parent{display: flex; align-items: center; } or#parent{display: flex; } .son{ align-self: center; } or#parent{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
Copy the code

The advantages and disadvantages

Advantages: simple and flexible; powerful
Disadvantages: poor PC compatibility, mobile (Android4.0+)

★ Summary of this chapter:

For vertical center, the first thing that comes to mind isline-heightBut this can only be used for inline content;
The second is to consider whether it can be usedvertical-align: middle;, but this must be familiar with the principle to be able to use smoothly, suggested to seeVertical-align and line-height are gay friends ；
Then there is absolute positioning, although there is a bit more code, but better for different situations;
Use Flex when it is available on mobile compatibility

Three, horizontal and vertical center

Chapter 1, chapter 2, and Chapter 3 are all simple structures of parent+son. The HTML code and renderings are not posted until chapter 4

(1) line/line block level/picture ▲

Text-align: center; Font-size: 0; mso-bidi-font-size: 0pt; mso-bidi-font-size: 0pt; Is to eliminate the approximate middle bug

#parent{height: 150px; line-height: 150px; /* align: center; text-align: center; font-size: 0; /* Eliminate ghost blank node bug*/}#son{/*display: inline-block; */ vertical-align: middle; }Copy the code

The advantages and disadvantages

Advantages: Simple code; Good compatibility (IE8 +)
Disadvantages: only valid for in-line content; You need to addfont-size: 0;Can be completely vertically centered; Note that the HTML #parent wrap #son should have a line break or space between them; Be familiar withline-heightandvertical-alignHomosexual friendships are more difficult

(2)table-cell

Principle: CSS Table, the vertical alignment of the Table content is middle, and then take different ways to achieve horizontal center depending on whether the inline content or block level content

#parent{height: 150px; width: 200px; display: table-cell; vertical-align: middle; /*text-align: center; */ /* If it is an inline element, add this */}#son{/*margin: 0 auto; */ width: 100px; height: 50px; }Copy the code

The advantages and disadvantages

Advantages: simple; Suitable for unknown width and height; Good compatibility (IE8 +)
Disadvantages: set tabl-cell element, width and height value set percentage is invalid, need to set its parent elementdisplay: table;To come into force; Table-cell is not aware of margin. Setting table-row and other attributes on the parent element will also make it not aware of height. Setting float or position breaks the default layout. Consider adding a parent div that defines properties such as float. Content overflows automatically prop up the parent element

(3) Button as parent element

button#parent{/* Change the default style of button
    height: 150px;
    width: 200px;
    outline: none;  
    border: none;
}
#son{display: inline-block; /* Button text-align: center */}Copy the code

The advantages and disadvantages

Advantages: Simple and convenient, take full advantage of default styles
Disadvantages: only applicable to inline content; Some default styles need to be cleared; Horizontal and vertical center compatibility is very good, but IE click will have depression effect!

(4) Absolute positioning

Principle: The values of top, right, bottom and left are relative to the size of the parent element, and margin or transform are relative to their own size. When combined, the geometric horizontal and vertical centers are achieved

#parent{
    position: relative;
}
#son{position: absolute; top: 50%; left: 50%; /* margin-left: negative half of its width; Margin-top: negative half of its height; */ transform: translate(-50%,-50%); }Copy the code

The advantages and disadvantages

Advantages: Good compatibility with margin; Both block-level and inline elements can be implemented
Disadvantages: more code; Out of the document flow; To use margin you need to know the width and height; Poor compatibility with Transform (IE9 +)

(5) Absolutely in the middle

Margin-top &bottom: 0; margin-top&bottom: 0; margin-top&bottom: 0; When left and right are 0,margin-left&right with auto will extend infinitely and fill up the space and split evenly

#parent{
    position: relative;
}
#son{
    position: absolute;
    margin: auto;
    width: 100px;
    height: 50px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
Copy the code

The advantages and disadvantages

Advantages: no need to pay attention to width and height; Good compatibility (IE8 +)
Disadvantages: more code; Out of document flow

(6)flex

#parent{
    display: flex;
}
#son{margin: auto; } or#parent{display: flex; justify-content: center; align-items: center; } or#parent{
    display: flex;
    justify-content: center;
}
#son{
    align-self: center;
}
Copy the code

The advantages and disadvantages

Advantages: simple and flexible; powerful
Disadvantages: poor PC compatibility, mobile (Android4.0+)

(7) Center window

Principle: VH is the viewport unit, viewport is the visible part of the document, 50Vh is the height of the viewport 50/100, set the top distance of 50Vh

#son{/*0; /*0; /*0; /*0; If you drop it, add overflow:hidden; */ margin: 50vh auto 0; transform: translateY(-50%); }Copy the code

The advantages and disadvantages

Advantages: simple; Easy to understand; Two lines of code are centered horizontally and vertically on the screen
Cons: poor compatibility (ie9+, Android4.4+)

★ Summary of this chapter:

In general, horizontal and vertical center, we most commonly used is absolute positioning plus negative margin, the disadvantage is that you need to know the width and height, the use of transform can not need, but poor compatibility (IE9 +);
The second is absolute center, absolute position set top, left, right, bottom to 0, thenmargin:auto;Let the browser automatically split the margins to achieve horizontal and vertical center.
In-line/in-line block/image content is preferredline-heightandvertical-alignIn combination, don’t forget there aretext-alignIn fact, this method code is not much, it is a little difficult to understand the principle, want to skillfully deal with various situations still need to study;
Use Flex when it is available on mobile compatibility.

Four, two column layout

4.1 The width of the left column is fixed, and the right column is adaptive

Effect:

(1) Use float+margin implementation

HTML code:

<body>
<div id="left"<div id= <div id="right"> Right column adaptive </div> </body>Copy the code

The CSS code:

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right {
    background-color: #0f0;height: 500px; margin-left: 100px; /* is greater than or equal to#left width */
}
Copy the code

(2) use float+margin(fix) implementation

HTML code:

<body>
<div id="left"<div id= <div id="right-fix">
    <div id="right"> Right column adaptive </div> </div>Copy the code

The CSS code:

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right-fix {
    float: right; width: 100%; margin-left: -100px; /* Positive value is greater than or equal toThe width of #left can be displayed on the same line */
}
#right{margin-left: 100px; /* is greater than or equal to#left width */
    background-color: #0f0;
    height: 500px;
}
Copy the code

(3) Use float+overflow

HTML code:

<body>
<div id="left"<div id= <div id="right"> Right column adaptive </div> </body>Copy the code

The CSS code:

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}
#right {
    background-color: #0f0;height: 500px; overflow: hidden; /* Trigger BFC to achieve adaptive */}Copy the code

The advantages and disadvantages:

Advantages: simple code, easy to understand, no need to pay attention to the width of the fixed width, using BFC to achieve adaptive effect
Disadvantages: Floating from the document flow, need to manually clear the floating, otherwise it will produce height collapse; Does not support ie6

(4) Use table to achieve

HTML code:

<div id="parent">
    <div id="left"<div id= <div id="right"> Right column adaptive </div> </div>Copy the code

The CSS code:

#parent{
    width: 100%;
    display: table;
    height: 500px;
}
#left {
    width: 100px;
    background-color: #f00;
}
#right {
    background-color: #0f0;
}
#left,#right{display: table-cell; /* Automatically allocate the width with the cell */}Copy the code

The advantages and disadvantages:

Advantages: simple code, easy to understand, no need to pay attention to the width of the fixed width, the use of automatic cell allocation to achieve self-adaptive effect
Disadvantages: margin failure; Setting interval is troublesome; Does not support ie8 –

(5) The use of absolute positioning

HTML code:

<body>
<div id="parent">
    <div id="left"<div id= <div id="right"> Right column adaptive </div> </div>Copy the code

The CSS code:

#parent{position: relative; /* * * */#left {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f00;
    width: 100px;
    height: 500px;
}
#right {position: absolute; top: 0; left: 100px; The value of /* is greater than or equal to#left width */
    right: 0;
    background-color: #0f0;
    height: 500px;
}
Copy the code

(6) Using Flex implementation

HTML code:

<body>
<div id="parent">
    <div id="left"<div id= <div id="right"> Right column adaptive </div> </div>Copy the code

The CSS code:

#parent{
    width: 100%;
    height: 500px;
    display: flex;
}
#left {
    width: 100px;
    background-color: #f00;
}
#right {flex: 1; /* Background-color:#0f0;
}

Copy the code

(7) Use Grid to achieve

HTML code:

<body>
<div id="parent">
    <div id="left"<div id= <div id="right"> Right column adaptive </div> </div>Copy the code

The CSS code:

#parent {width: 100%; height: 500px; display: grid; grid-template-columns: 100px auto; /* set auto to 1fr */#left {
    background-color: #f00;
}
#right {
    background-color: #0f0;
}

Copy the code

4.2 The left column is adaptive, and the right column is fixed width

Effect:

(1) Use float+margin implementation

HTML code:

<body>
<div id="parent">
    <div id="left"> The left column is adaptive </div> <div id="right"</div> </div>Copy the code

The CSS code:

#parent{height: 500px; padding-left: 100px; / * offset#left margin-left is centered at the level of #parent */
}
#left {
    width: 100%;
    height: 500px;
    float: left; margin-left: -100px; /* positive is equal to#right width */
    background-color: #f00;
}
#right {
    height: 500px;
    width: 100px;
    float: right;
    background-color: #0f0;
}

Copy the code

(2) Use float+overflow implementation

HTML code:

<body>
<div id="parent">
    <div id="right"<div id= <div id="left"> Left column ADAPTS to </div> <! </div> </body>Copy the code

The CSS code:

#left {overflow: hidden; /* Trigger BFC */ height: 500px; background-color:#f00;
}
#right {margin-left: 10px; /*margin needs to be defined in# * / in the right
    float: right;
    width: 100px;
    height: 500px;
    background-color: #0f0;
}

Copy the code

The advantages and disadvantages:

Advantages: simple code, easy to understand, no need to pay attention to the width of the fixed width, using BFC to achieve adaptive effect
Disadvantages: Floating from the document flow, need to manually clear the floating, otherwise it will produce height collapse; Does not support ie6

(3) Use table to achieve

HTML code:

<body>
<div id="parent">
    <div id="left"> The left column is adaptive </div> <div id="right"</div> </div>Copy the code

The CSS code:

#parent{
    width: 100%;
    height: 500px;
    display: table;
}
#left {
    background-color: #f00;
    display: table-cell;
}
#right {
    width: 100px;
    background-color: #0f0;
    display: table-cell;
}

Copy the code

The advantages and disadvantages:

Advantages: simple code, easy to understand, no need to pay attention to the width of the fixed width, the use of automatic cell allocation to achieve self-adaptive effect
Disadvantages: margin failure; Setting interval is troublesome; Does not support ie8 –

(4) The use of absolute positioning

HTML code:

<body>
<div id="parent">
    <div id="left"> The left column is adaptive </div> <div id="right"</div> </div>Copy the code

The CSS code:

#parent{position: relative; /* * * */#left {position: absolute; top: 0; left: 0; right: 100px; /* is greater than or equal to#rigth width */
    background-color: #f00;
    height: 500px;
}
#right {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #0f0;
    width: 100px;
    height: 500px;
}

Copy the code

(5) Use Flex

HTML code:

<body>
<div id="parent">
    <div id="left"> The left column is adaptive </div> <div id="right"</div> </div>Copy the code

The CSS code:

#parent{
    height: 500px;
    display: flex;
}
#left {
    flex: 1;
    background-color: #f00;
}
#right {
    width: 100px;
    background-color: #0f0;
}

Copy the code

(6) Use Grid to achieve

HTML code:

<body>
<div id="parent">
    <div id="left"> The left column is adaptive </div> <div id="right"</div> </div>Copy the code

The CSS code:

#parent {height: 500px; display: grid; grid-template-columns: auto 100px; /* set auto to 1fr */#left {
    background-color: #f00;
}
#right {
    background-color: #0f0;
}

Copy the code

4.3 One column is indeterminate and the other is adaptive

(Box width changes as content increases or decreases, and the other box ADAPTS)

Effect:

After the change:

(1) Use float+overflow implementation

HTML code:

<body>
<div id="parent">
    <div id="left"<div > <div id="right"> Right column adaptive </div> </div>Copy the code

The CSS code:

#left {
    margin-right: 10px;
    float: left; /* height: 500px; background-color:#f00;
}
#right {overflow: hidden; /* Trigger BFC */ height: 500px; background-color:#0f0;
}

Copy the code

The advantages and disadvantages:

Advantages: simple code, easy to understand, no need to pay attention to width, using BFC to achieve adaptive effect
Disadvantages: Floating from the document flow, need to manually clear the floating, otherwise it will produce height collapse; Does not support ie6

(2) Use Flex

HTML code:

<body>
<div id="parent">
    <div id="left"<div > <div id="right"> Right column adaptive </div> </div>Copy the code

The CSS code:

#parent{
    display: flex;
}
#left {/* no width */
    margin-right: 10px;
    height: 500px;
    background-color: #f00;
}
#right {
    height: 500px;
    background-color: #0f0;flex: 1; / * divide#parent remaining part */
}

Copy the code

(3) Use Grid to achieve

HTML code:

<body>
<div id="parent">
    <div id="left"<div > <div id="right"> Right column adaptive </div> </div>Copy the code

The CSS code:

#parent{display: grid; grid-template-columns: auto 1fr; /*auto = 1fr; /*auto = 1fr#left {
    margin-right: 10px;
    height: 500px;
    background-color: #f00;
}
#right {
    height: 500px;
    background-color: #0f0;
}

Copy the code

The left column is adaptive and the right column is variable width (see 4.1 and 4.3 for corresponding code examples)

Five, three column layout

5.1 Two columns have fixed width and one column is adaptive

Effect:

(1) Use float+margin implementation

HTML code:

<body>
<div id="parent">
    <div id="left"<div id= <div id="center"<div id= <div id="right"> Right column adaptive </div> </div>Copy the code

The CSS code:

#parent{min-width: 310px; /*100+10+200, in case of insufficient width, child element newline */}#left {margin-right: 10px; / *Space between #left and #center */
    float: left;
    width: 100px;
    height: 500px;
    background-color: #f00;
}
#center{
    float: left;
    width: 200px;
    height: 500px;
    background-color: #eeff2b;
}
#right {margin-left: 320px; / * is equal to theThe sum of the widths of #left and #center plus the spacing gives you the spacing between #right and #center */
    height: 500px;
    background-color: #0f0;
}

Copy the code

(2) Use float+overflow implementation

HTML code:

<body>
<div id="parent">
    <div id="left"<div id= <div id="center"<div id= <div id="right"> Right column adaptive </div> </div>Copy the code

The CSS code:

#parent{min-width: 320px; /*100+10+200+20, in case of insufficient width, child element newline */}#left {margin-right: 10px; / * * /float: left;
    width: 100px;
    height: 500px;
    background-color: #f00;
}
#center{margin-right: 10px; /* Define and here#right interval */
    float: left;
    width: 200px;
    height: 500px;
    background-color: #eeff2b;
}
#right {overflow: hidden; /* Trigger BFC */ height: 500px; background-color:#0f0;
}

Copy the code

The advantages and disadvantages:

Advantages: simple code, easy to understand, no need to pay attention to the width of the fixed width, using BFC to achieve adaptive effect
Disadvantages: Floating from the document flow, need to manually clear the floating, otherwise it will produce height collapse; Does not support ie6

(3) Use table to achieve

HTML code:

<body>
<div id="parent">
    <div id="left"<div id= <div id="center"<div id= <div id="right"> Right column adaptive </div> </div>Copy the code

The CSS code:

#parent {width: 100%; height: 520px; /* margin: -10px; */ display: table; /* Border-spacing: 10px; /* border-spacing: 10px; / * key!!!!!! Set spacing */}#left {
    display: table-cell;
    width: 100px;
    background-color: #f00;
}
#center {
    display: table-cell;
    width: 200px;
    background-color: #eeff2b;
}
#right {
    display: table-cell;
    background-color: #0f0;
}

Copy the code

The advantages and disadvantages:

Advantages: simple code, easy to understand, no need to pay attention to the width of the fixed width, the use of automatic cell allocation to achieve self-adaptive effect
Disadvantages: margin failure; Setting interval is troublesome; Does not support ie8 –

(4) Using Flex implementation

HTML code:

<body>
<div id="parent">
    <div id="left"<div id= <div id="center"<div id= <div id="right"> Right column adaptive </div> </div>Copy the code

The CSS code:

#parent {
    height: 500px;
    display: flex;
}
#left {margin-right: 10px; /* width: 100px; background-color:#f00;
}
#center {margin-right: 10px; /* width: 200px; background-color:#eeff2b;
}
#right {flex: 1; / * divideThe remainder of #parent is adaptive */
    background-color: #0f0;
}

Copy the code

(5) Use Grid to achieve

HTML code:

<body>
<div id="parent">
    <div id="left"<div id= <div id="center"<div id= <div id="right"> Right column adaptive </div> </div>Copy the code

The CSS code:

#parent {height: 500px; display: grid; grid-template-columns: 100px 200px auto; /* Set the width of the first and second columns to auto or 1fr*/#left {margin-right: 10px; /* spacing */ background-color:#f00;
}
#center {margin-right: 10px; /* spacing */ background-color:#eeff2b;
}
#right {
    background-color: #0f0;
}

Copy the code

5.2 Fixed width on both sides, adaptive in the middle

5.2.1 Double-flying wing layout method

Effect:

HTML code:

<body>
<div id="header"></div> <! -- the middle column needs to come first --> <div id="parent">
    <div id="center">
        <div id="center_inbox"</div> <hr> <! </div> <div id="left"<div id= <div id="right"</div> <div id="footer"></div>
</body>

Copy the code

The CSS code:

#header {
    height: 60px;
    background-color: #ccc;
}
#left {
    float: left; width: 100px; height: 500px; margin-left: -100%; / * adjustment#left position, value is equal to its own width */
    background-color: #f00;Opacity: 0.5; }#center {
    height: 500px;
    float: left;
    width: 100%;
    background-color: #eeff2b;
}
#center_inbox{
    height: 480px;
    border: 1px solid # 000;margin: 0 220px 0 120px; / * key!!!!!! The left and right boundaries are equal to the width of the left and right boxes, and the extra is the spacing between boxes */}#right {
    float: left; width: 200px; height: 500px; margin-left: -200px; /* Set right to the specified position */ background-color:#0f0;Opacity: 0.5; }#footer {clear: both; /* Clear float!! */ height: 60px; background-color:#ccc;
}

Copy the code

5.2.2 Grail layout method

Effect:

HTML code:

<body>
<div id="header"></div>
<div id="parent"> <! --#center needs to come first -->
    <div id="center"<hr> </div> <div id="left"<div id= <div id="right"</div> <div id="footer"></div>
</body>

Copy the code

The CSS code:

#header{
    height: 60px;
    background-color: #ccc;
}
#parent {box-sizing: border-box; height: 500px; padding: 0 215px 0 115px; / * in order to makeThe left and right padding is equal to the width of the left and right boxes respectively. You can adjust the spacing by combining the left and right boxes with the relative positioning */
}
#left {margin-left: -100%; / * make#left line */position: relative; left: -115px; /* Relative positioning adjustment#left position, positive value is greater than or equal to its width */
    float: left;
    width: 100px;
    height: 500px;
    background-color: #f00;Opacity: 0.5; }#center {
    float: left; width: 100%; / * because#parent padding, for adaptive purposes */
    height: 500px;
    box-sizing: border-box;
    border: 1px solid # 000;
    background-color: #eeff2b;
}
#right {position: relative; left: 215px; /* Relative positioning adjustment#right position, greater than or equal to its own width */width: 200px; height: 500px; margin-left: -200px; / * make#right line */
    float: left;
    background-color: #0f0;Opacity: 0.5; }#footer{
    height: 60px;
    background-color: #ccc;
}

Copy the code

5.2.3 Using Grid

Effect:

HTML code:

<body>
<div id="parent">
    <div id="header"></div> <! --#center needs to come first -->
    <div id="center"<hr> </div> <div id="left"<div id= <div id="right"<div id= <div id="footer"></div>
</div>
</body>

Copy the code

The CSS code:

#parent {height: 500px; display: grid; grid-template-columns: 100px auto 200px; /* Set 3 rows */ grid-template-rows: 60px auto 60px; /* Set 3 lines */ * set grid area distribution */ grid-template-areas:"header header header" 
        "leftside main rightside" 
        "footer footer footer";
}
#header {grid-area: header; /* Specify the grid area */ background-color:#ccc;
}
#left {
    grid-area: leftside;
    background-color: #f00;Opacity: 0.5; }#center {grid-area: main; /* Specify the grid area */ margin: 0 15px; /* Set interval */ border: 1px solid# 000;
    background-color: #eeff2b;
}
#right {grid-area: rightside; /* Specify the grid area */ background-color:#0f0;Opacity: 0.5; }#footer {grid-area: footer; /* Specify the grid area */ background-color:#ccc;
}

Copy the code

5.2.4 Other methods

Effect:

(1) Use table to achieve

HTML code:

<body>
<div id="parent">
    <div id="left"<div id= <div id="center"<div > <div id="right"</div> </div>Copy the code

The CSS code:

#parent {
    width: 100%;
    height: 500px;
    display: table;
}
#left {
    display: table-cell;
    width: 100px;
    background-color: #f00;
}
#center {
    display: table-cell;
    background-color: #eeff2b;
}
#right {
    display: table-cell;
    width: 200px;
    background-color: #0f0;
}

Copy the code

The advantages and disadvantages:

Advantages: simple code, easy to understand;
Disadvantages: margin is invalid, the spacing between the two sides cannot be eliminated using the border-spacing table; Does not support ie8 –

(2) Use Flex

HTML code:

<body>
<div id="parent">
    <div id="left"<div id= <div id="center"<div > <div id="right"</div> </div>Copy the code

The CSS code:

#parent {
    height: 500px;
    display: flex;
}
#left {
    width: 100px;
    background-color: #f00;
}
#center {flex: 1; / * divide#parent remaining part */
    background-color: #eeff2b;
}
#right {
    width: 200px;
    background-color: #0f0;
}

Copy the code

(3) Use position to achieve

HTML code:

<body>
<div id="parent">
    <div id="left"<div id= <div id="center"<div > <div id="right"</div> </div>Copy the code

The CSS code:

#parent {position: relative; /* * * */#left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 500px;
    background-color: #f00;
}
#center {height: 500px; margin-left: 100px; /* is greater than or equal toThe width of #left, or add the same size padding-left*/ to #parentmargin-right: 200px; /* is greater than or equal toThe width of #right, or add the same size padding-right*/ to #parent
    background-color: #eeff2b;
}
#right {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 500px;
    background-color: #0f0;
}

Copy the code

The advantages and disadvantages:

Advantages: easy to understand, good compatibility
Disadvantages: need to manually calculate the width to determine the margin; Out of the document flow; The code is various

6. Multi-column layout

6.1 Uniform Width Layout

6.1.1 Four columns of equal width

(1) Use float implementation

Effect:

HTML code:

<body>
<div id="parent">
    <div class="column"</p></div> <div class= </p></div"column"</p></div> <div class= </p></div"column"</p></div> <div class= </p"column"<p> </div> </div> </body>Copy the code

The CSS code:

#parent {margin-left: -20px; }. Column {padding-left: 20px; /* width: 25%;float: left;
    box-sizing: border-box;
    border: 1px solid # 000;background-clip: content-box; /* The background color is drawn from the content for easy observation */ height: 500px; } .column:nth-child(odd){ background-color:#f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

Copy the code

The advantages and disadvantages:

Advantages: simple code, easy to understand; Good compatibility
Disadvantages: Need to manually clear the float, otherwise it will cause height collapse

(2) Use table to achieve

Effect:

HTML code:

<body>
<div id="parent">
    <div class="column"</p></div> <div class= </p></div"column"</p></div> <div class= </p></div"column"</p></div> <div class= </p"column"<p> </div> </div> </body>Copy the code

The CSS code:

#parent {height: 540px; /* offset the height of the 20*2 space */ display: table; margin: -20px 0; /* The spacing between the top and bottom elements is larger */ * The spacing between the top and bottom elements is larger */ /* set spacing */}. Column {display: table-cell; } .column:nth-child(odd){ background-color:#f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

Copy the code

The advantages and disadvantages:

Advantages: simple code, easy to understand; You don’t have to worry about the width, the cells are automatically equalized
Disadvantages: margin failure; Setting interval is troublesome; Does not support ie8 –

(3) Use Flex

Effect:

HTML code:

<body>
<div id="parent">
    <div class="column"</p></div> <div class= </p></div"column"</p></div> <div class= </p></div"column"</p></div> <div class= </p"column"<p> </div> </div> </body>Copy the code

The CSS code:

#parent {margin-left: -15px; /* Make the content look centered */ height: 500px; display: flex; } .column{ flex: 1; /* Divide it up#parent*/margin-left: 15px; /* set spacing */}. Column :nth-child(odd){background-color:#f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

Copy the code

The column width

Effect:

(1) Use float implementation

HTML code:

<body>
<div id="parent">
    <div class="column"</p></div> <div class= </p></div"column"</p></div> <div class= </p></div"column"</p></div> <div class= </p"column"</p></div> <div class= </p></div"column"</p></div> <div class= </p></div"column"<p> </div> </div> </body>Copy the code

The CSS code:

#parent {
    height: 500px;
}
.column{
    float: left; /* Add float */ width: 16.666666666667%; /*100÷ column */ height: 500px; } .column:nth-child(odd){ background-color:#f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

Copy the code

The advantages and disadvantages:

Advantages: simple code, easy to understand; Good compatibility
Disadvantages: Need to manually clear the float, otherwise it will cause height collapse

(2) Use table to achieve

The HTML code

<body>
<div id="parent">
    <div class="column"</p></div> <div class= </p></div"column"</p></div> <div class= </p></div"column"</p></div> <div class= </p"column"</p></div> <div class= </p></div"column"</p></div> <div class= </p></div"column"<p> </div> </div> </body>Copy the code

The CSS code:

#parent {width: 100%; height: 500px; display: table; } .column{ display: table-cell; }. Column :nth-child(odd){background-color:#f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

Copy the code

The advantages and disadvantages:

Advantages: simple code, easy to understand; Don’t worry about the width. Cells are automatically equalized
Disadvantages: margin failure; Setting interval is troublesome; Not compatible with Internet explorer –

(3) Use Flex

HTML code:

<body>
<div id="parent">
    <div class="column"</p></div> <div class= </p></div"column"</p></div> <div class= </p></div"column"</p></div> <div class= </p"column"</p></div> <div class= </p></div"column"</p></div> <div class= </p></div"column"<p> </div> </div> </body>Copy the code

The CSS code:

#parent {height: 500px; display: flex; } .column{ flex: 1; /* The column count is equal to the column count#parent*/
}
.column:nth-child(odd){
    background-color: #f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

Copy the code

(4) Use Grid to achieve

HTML code:

<body>
<div id="parent">
    <div class="column"</p></div> <div class= </p></div"column"</p></div> <div class= </p></div"column"</p></div> <div class= </p"column"</p></div> <div class= </p></div"column"</p></div> <div class= </p></div"column"<p> </div> </div> </body>Copy the code

The CSS code:

#parent {height: 500px; display: grid; The grid - the template - the columns: repeat (6, 1 fr); }. Column {}. Column :nth-child(odd){background-color:#f00;
}
.column:nth-child(even){
    background-color: #0f0;
}

Copy the code

6.2 Nine-grid layout

Effect:

(1) Use table to achieve

HTML code:

<body>
<div id="parent">
    <div class="row">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <div class="row">
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <div class="row">
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
</div>
</body>

Copy the code

The CSS code:

#parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: table;
}
.row {
    display: table-row;
}
.item {
    border: 1px solid # 000;
    display: table-cell;
}

Copy the code

The advantages and disadvantages:

Advantages: simple code, easy to understand;
Disadvantages: margin is invalid, the spacing between the two sides cannot be eliminated using the border-spacing table; Does not support ie8 –

(2) Use Flex

HTML code:

<body>
<div id="parent">
    <div class="row">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <div class="row">
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <div class="row">
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
</div>
</body>

Copy the code

The CSS code:

#parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.row {
    display: flex;
    flex: 1;
}
.item {
    flex: 1;
    border: 1px solid # 000;
}

Copy the code

(3) Use Grid to achieve

The CSS Grid is powerful enough to implement a wide variety of three-dimensional layouts, as you can see in the reading recommendations at the end of this article

HTML code:

<body>
<div id="parent">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>
</body>

Copy the code

The CSS code:

#parent {width: 1200px; height: 500px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); / / grid-template-rows: repeat(3, 1fr); / / grid-template-rows: repeat(3, 1fr); }. Item {border: 1px solid# 000;
}

Copy the code

6.3 Grid system

The advantages and disadvantages:

Advantages: simple code, easy to understand; Improve the fluidity of page content, can adapt to a variety of devices;

(1) Generate with Less

/ / @media screen and (max-width: 768px){. Generate -columns(12); / * this set the number of columns * /. The generate - columns (@ n, @ I: 1) the when I < = (@ @ {n). The column - xs - @ {I} {width: 100% (@ I * / @ n); } .generate-columns(@n, (@i+1)); } } @media screen and (min-width: 768px){ .generate-columns(12); / * this set the number of columns * /. The generate - columns (@ n, @ I: 1) the when I < = (@ @ {n). The column - sm - @ {I} {width: 100% (@ I * / @ n); } .generate-columns(@n, (@i+1)); } } div[class^="column-xs-"] {float: left;
}
div[class^="column-sm-"] {float: left;
}
Copy the code

Compiled CSS code:

@media screen and (max-width: 768px) {. Column-xs-1 {width: 8.33333333%; }. Column-xs-2 {width: 16.66666667%; } .column-xs-3 { width: 25%; }. Column-xs-4 {width: 33.33333333%; }. Column-xs-5 {width: 41.66666667%; } .column-xs-6 { width: 50%; }. Column-xs-7 {width: 58.33333333%; }. Column-xs-8 {width: 66.66666667%; } .column-xs-9 { width: 75%; }. Column-xs-10 {width: 83.33333333%; }. Column-xs-11 {width: 91.66666667%; } .column-xs-12 { width: 100%; }} @media screen and (min-width: 768px) {. Column-sm-1 {width: 8.33333333%; }. Column-sm-2 {width: 16.66666667%; } .column-sm-3 { width: 25%; }. Column-sm-4 {width: 33.33333333%; }. Column-sm-5 {width: 41.66666667%; } .column-sm-6 { width: 50%; }. Column-sm-7 {width: 58.33333333%; }. Column-sm-8 {width: 66.66666667%; } .column-sm-9 { width: 75%; }. Column-sm-10 {width: 83.33333333%; }. Column-sm-11 {width: 91.66666667%; } .column-sm-12 { width: 100%; } } div[class^="column-xs-"] {float: left;
}
div[class^="column-sm-"] {float: left;
}

Copy the code

7. Full screen layout

Effect:

(1) Use absolute positioning

HTML code:

<body>
<div id="parent">
    <div id="top">top</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="bottom">bottom</div>
</div>
</body>

Copy the code

The CSS code:

html, body, #parent {height: 100%; overflow: hidden; }
#parent > div {
    border: 1px solid # 000;
}
#top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
}
#left {position: absolute; top: 100px; The value of /* is greater than or equal to# height of top */left: 0; bottom: 50px; The value of /* is greater than or equal to#bottom height */
    width: 200px;
}
#right {position: absolute; overflow: auto; left: 200px; The value of /* is greater than or equal to#left width */right: 0; top: 100px; The value of /* is greater than or equal to# height of top */bottom: 50px; The value of /* is greater than or equal to#bottom height */
}
#bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
}

Copy the code

The advantages and disadvantages:

Pros: Easy to understand
Disadvantages: Lots of code; Need to calculate the width and height of each box;

(2) Use Flex

HTML code:

<body>
<div id="parent">
    <div id="top">top</div>
    <div id="middle">
        <div id="left">left</div>
        <div id="right">right</div>
    </div>
    <div id="bottom">bottom</div>
</div>
</body>

Copy the code

The CSS code:

*{
    margin: 0;
    padding: 0;
}
html,body,#parent{
    height:100%;
}
#parent {
    display: flex;
    flex-direction: column;
}
#top {
    height: 100px;
}
#bottom {
    height: 50px;
}
#middle {
    flex: 1;
    display: flex;
}
#left {
    width: 200px;
}
#right {
    flex: 1;
    overflow: auto;
}

Copy the code

(3) Use Grid to achieve

HTML code:

<body>
<div id="parent">
    <div id="top">top</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="bottom">bottom</div>
</div>
</body>

Copy the code

The CSS code:

*{
    margin: 0;
    padding: 0;
}
html, body, #parent {
    height: 100%;
}
#parent {width: 100%; height: 100%; display: grid; */ grid-template-columns: 200px 1fr; /* The first column is 200px wide and the second column is 1fr. Grid-template-rows: 100px auto 50px; grid-template-rows: 100px; /* Define grid area distribution */ grid-template-areas:"header header"
        "aside main"
        "footer footer";
}
#parent>div{
    border: 1px solid # 000;
}
#top{grid-area: header; /* Specify which grid region to use */}#left{grid-area: aside; /* Specify which grid region to use */}#right{grid-area: main; /* Specify which grid region to use */}#bottom{grid-area: footer; /* Specify which grid region to use */}Copy the code

Eight, site instance layout analysis:

As a result of the method is numerous, the analysis of the time think of which to use which, as long as IE9 and Google performance is consistent, I will not test other browsers, if there is any question or opinion, please leave a message!

8.1 Official website of Xiaomi

https://www.mi.com/

8.1.1 Methods to be Compatible with IE9+

(1) Overall page

The whole page can be divided into top, top, middle, bottom and bottom five structures, as shown in the figure:

HTML code:

<body>
<div class="header"></div>
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>
<div class="footer"></div>
</body>

Copy the code

The CSS code:

Margin: 0; /* margin: 0; padding: 0; box-sizing: border-box; list-style: none; } body{ background-color:#f5f5f5;
}
.header{
    margin-bottom: 20px;
    height: 40px;
    background-color: # 333;
}
.top{
    height: 1210px;
    background-color: #fff;
}
.center{
    width: 1226px;
    margin: 0 auto;
    margin-bottom: 60px;
    height: 1791px;
    background-color: #fff;
}
.bottom{
    height: 274px;
    background-color: #fff;
}
.footer{
    margin: 0 auto;
    width: 1226px;
    height: 166px;
    border: 1px solid # 000;
}

Copy the code

(2) local – the header

The header section starts with a horizontal center of content. The content box can be divided into left and right parts, as shown in the figure below:

HTML code:

<div class="header">
    <div class="container">
        <div class="header-left"></div>
        <div class="header-rigth"></div>
    </div>
</div>

Copy the code

The CSS code:

.container{/* width: 1226px; height: 100%; margin: 0 auto; border: 1px solid#f00;
}
.header-left{
    width: 380px;
    height: 100%;
    float: left;
    background-color: #0f0;
}
.header-rigth{
    width: 260px;
    height: 100%;
    float: right;
    background-color: #0f0;
}

Copy the code

(3) local – top

The top section first has a horizontal middle content, and then the content can be divided into four parts from top to bottom, and then each part is further subdivided…… I can’t go any further. I’ll go straight to the picture above:

HTML code:

<div class="top">
    <div class="container">
        <div class="top-nav"></div>
        <div class="top-slider">
            <div class="slider-navbar"></div>
        </div>
        <div class="top-recommend">
            <div class="recommend-left"></div>
            <div class="recommend-right">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <div class="top-flashsale">
            <div class="flashsale-title"></div>
            <div class="flashsale-content">
                <div class="content-timer"></div>
                <ul class="content-shops">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Copy the code

The CSS code:

.top {
    height: 1210px;
    background-color: #fff;
}
.top-nav {
    height: 100px;
    background-color: #f00;
}
.top-slider {
    margin-bottom: 14px;
    position: relative;
    height: 460px;
    background-color: #00f;
}
.slider-navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 234px;
    height: 100%;
    background-color: black;
    opacity: .5;
}
.top-recommend {
    margin-bottom: 26px;
    height: 170px;
    background-color: #0f0;
}
.recommend-left {
    float: left;
    height: 100%;
    width: 234px;
    background-color: skyblue;
}
.recommend-right {
    float: right;
    width: 978px;
    height: 100%;
    border: 1px solid # 000;
}
.recommend-right > ul {
    height: 100%;
}
.recommend-right > ul li {
    float: left;
    width: 316px;
    height: 100%;
    background-color: deepskyblue;
}
.recommend-right > ul li + li {
    margin-left: 14px;
}
.top-flashsale {
    height: 438px;
    background-color: #ff4455;
}
.flashsale-title {
    height: 58px;
    background-color: purple;
}
.flashsale-content {
    border: 1px solid # 000;
    padding-bottom: 40px;
    height: 380px;
}
.content-timer {
    margin-right: 14px;
    float: left;
    width: 234px;
    height: 100%;
    background-color: #fff;
}
.content-shops {
    overflow: hidden;
    height: 100%;
    background-color: #6effb1;
}
.content-shops > li {
    float: left;
    width: 234px;
    height: 100%;
    background-color: #fff;}. Content-shops > li+li {margin-left: 12.5px; }Copy the code

(4) local – center

The Center section is a display of cells, there are many similar modules, just pick a few to implement, directly look at the picture:

HTML code:

<div class="center">
    <div class="center-phone">
        <div class="phone-title"></div>
        <div class="phone-content">
            <div class="phone-left"></div>
            <ul class="phone-right">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <div class="center-household">
        <div class="household-title"></div>
        <div class="household-content">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li>
                <p></p>
                <p></p>
            </li>
        </div>
    </div>

    <div class="center-video">
        <div class="video-title"></div>
        <ul class="video-content">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

Copy the code

The CSS code:

.center {
    margin: 0 auto;
    margin-bottom: 60px;
    padding-top: 60px;
    width: 1226px;
    height: 1791px;
    background-color: #fff;
}
.center-phone{
    margin-bottom: 8px;
    height: 686px;
    background-color: yellow;
}
.phone-title{
    height: 58px;
    background-color: black;
}
.phone-content{
    height: 628px;
    background-color: pink;
}
.phone-left{
    margin-right: 14px;
    float: left;
    width: 234px;
    height: 100%;
    background-color: darkseagreen;
}
.phone-right{
    overflow: hidden;
    height: 100%;
    background-color: #ccc;
}
.phone-right>li{
    margin-bottom: 28px;
    padding-left: 14px;
    float: left;
    width: 25%;
    height: 300px;
    border: 1px solid # 000;
    background-color: #f00;
    background-clip: content-box;
}
.phone-right>li:nth-child(1),
.phone-right>li:nth-child(5){
    margin-left: 0;
}
.center-household{
    margin-bottom: 8px;
    height: 686px;
    background-color: yellow;
}
.household-title{
    height: 58px;
    background-color: black;
}
.household-content{
    height: 614px;
}
.household-content>li{
    position: relative;
    margin-left: 14px;
    margin-bottom: 28px;
    float: left;
    width: 234px;
    height: 300px;
    background-color: #d7d7d7;
}
.household-content>li:nth-child(1),
.household-content>li:nth-child(6){
    margin-left: 0;
}
.household-content>li:last-child p:first-child{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 143px;
    border: 1px solid # 000;
}
.household-content>li:last-child p:last-child{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 143px;
    border: 1px solid # 000;
}
.center-video{
    height: 343px;
    background-color: pink;
}
.video-title{
    height: 58px;
    background-color: black;
}
.video-content{
    height: 285px;
}
.video-content>li{
    float: left;
    width: 296px;
    height: 100%;
    border: 1px solid # 000;
}
.video-content>li+li{
    margin-left: 14px;
}

Copy the code

(5) local – bottom

The bottom part is first a horizontal centered content, and then the content can be divided into two parts, each part is floating Li, as shown in the figure:

HTML code:

<div class="bottom">
    <div class="container">
        <div class="bottom-service">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="bottom-links">
            <div class="links-left">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="links-right"></div>
        </div>
    </div>
</div>

Copy the code

The CSS code:

.bottom {
    height: 274px;
    background-color: #fff;
}
.bottom-service{
    height: 80px;
    background-color: seagreen;
}
.bottom-service>ul{
    height: 100%;
}
.bottom-service>ul li{
    position: relative;
    padding: 0 50px;
    float: left;
    width: 20%;
    height: 100%;
    background-color: goldenrod;
    background-clip: content-box;
}
.bottom-service>ul li+li::before{
    position: absolute;
    top: 28px;
    left: 0;
    content: ' ';
    width: 1px;
    height: 24px;
    background-color: # 999;
}
.bottom-links{
    height: 192px;
    background-color: #8545e0;
}
.links-left{
    float: left;
    width: 960px;
    height: 100%;
    background-color: yellow;
}
.links-left>ul{
    height: 100%;
}
.links-left>ul li{
    padding-right: 60px;
    float: left;
    width: 16.666666666666667%;
    height: 100%;
    border: 1px solid # 000;
    background-color: #ff0000;
    background-clip: content-box;
}
.links-right{
    float: right;
    width: 252px;
    height: 100%;
    background-color: yellow;
}

Copy the code

(6) partial – footer

Footer division as shown below:

HTML code:

<div class="footer">
    <div class="footer-info">
        <div class="info-left"></div>
        <div class="info-right"></div>
    </div>
    <div class="footer-slogan"></div>
</div>

Copy the code

The CSS code:

.footer {
    margin: 0 auto;
    padding: 30px 0;
    width: 1226px;
    height: 166px;
    border: 1px solid # 000;
}
.footer-info{
    height: 57px;
    background-color: #6effb1;
}
.info-left{
    float: left;
    width: 630px;
    height: 100%;
    border: 1px solid # 000;
}
.info-right{
    float: right;
    width: 436px;
    height: 100%;
    border: 1px solid # 000;
}
.footer-slogan{
    margin-top: 30px;
    height: 19px;
    background-color: #8545e0;
}

Copy the code

(7) All codes (after optimization)

HTML code:

<body>
<div class="header">
    <div class="container">
        <div class="header-left fl"></div>
        <div class="header-rigth fr"></div>
    </div>
</div>
<div class="top">
    <div class="container">
        <div class="top-nav"></div>
        <div class="top-slider">
            <div class="slider-navbar"></div>
        </div>
        <div class="top-recommend">
            <div class="recommend-left fl"></div>
            <div class="recommend-right fr">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <div class="top-flashsale">
            <div class="flashsale-title common-title"></div>
            <div class="flashsale-content">
                <div class="content-timer fl"></div>
                <ul class="content-shops">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="center">
    <div class="center-phone module-box">
        <div class="phone-title common-title"></div>
        <div class="phone-content">
            <div class="phone-left fl"></div>
            <ul class="phone-right">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <div class="center-household module-box">
        <div class="household-title common-title"></div>
        <div class="household-content">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li>
                <p></p>
                <p></p>
            </li>
        </div>
    </div>

    <div class="center-video">
        <div class="video-title common-title"></div>
        <ul class="video-content">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<div class="bottom">
    <div class="container">
        <div class="bottom-service">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="bottom-links">
            <div class="links-left fl">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="links-right fr"></div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer-info">
        <div class="info-left fl"></div>
        <div class="info-right fr"></div>
    </div>
    <div class="footer-slogan"></div>
</div>
</body>

Copy the code

The CSS code:

/ * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- to extract common style -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * / * {/ * for convenience, so empty the default styles * / margin: 0; padding: 0; box-sizing: border-box; list-style: none; } body { background-color:#f5f5f5;}. Container {/* Horizontal centered content box */ width: 1226px; height: 100%; margin: 0 auto; border: 1px solid#f00;
}
.common-title {
    height: 58px;
    background-color: # 000;
}
.fl {float: left; } .fr {float: right; } .recommend-right, .flashsale-content, .phone-right > li, .household-content > li:last-child > p, .video-content > li, .links-left > ul li, .footer, .info-left, .info-right {border: 1px solid# 000; } /* Add the border style for easy observation, not for layout, can be deleted *// * -- -- -- -- -- the header part -- -- -- -- - * /. The header {margin - bottom: 20 px; height: 40px; background-color:# 333;
}
.header-left {
    width: 380px;
    height: 100%;
    background-color: #0f0;
}
.header-rigth {
    width: 260px;
    height: 100%;
    background-color: #0f0;} / * -- -- -- -- -- -- -- -- top part -- -- -- -- -- -- -- - * /. Top {/ * height: 1210 px; */ background-color:#fff;
}
.top-nav {
    height: 100px;
    background-color: #f00;} .top-slider { margin-bottom: 14px; position: relative; /* Parent */ height: 460px; background-color:#00f;} .slider-navbar { position: absolute; /* * * */ top: 0; left: 0; width: 234px; height: 100%; background-color: black; opacity: .5; } .top-recommend { margin-bottom: 26px; height: 170px; background-color:#0f0;} .recommend-left { height: 100%; width: 234px; background-color: skyblue; } .recommend-right { width: 978px; height: 100%; } .recommend-right > ul {height: 100%; } .recommend-right > ul li {float: left; /* width: 316px; height: 100%; background-color: deepskyblue; } .recommend-right > ul li + li { margin-left: 14px; } /* Set the float interval */. Top-flashsale {height: 438px; background-color:#ff4455;
}
.flashsale-title {}
.flashsale-content {
    padding-bottom: 40px;
    height: 380px;
}
.content-timer {
    margin-right: 14px;
    width: 234px;
    height: 100%;
    background-color: #fff;} .content-shops { overflow: hidden; /* Trigger BFC to achieve adaptive */ height: 100%; background-color:#6effb1;
}
.content-shops > li {
    float: left; /* width: 234px; height: 100%; background-color:#fff;}. Content-shops > li + li {margin-left: 12.5px; } / / / * * set up floating interval * -- -- -- -- -- -- -- -- center part -- -- -- -- -- -- -- - * /. The module - box {/ * * / similar module margin - bottom: 8 px; height: 686px; } .center { margin: 0 auto; margin-bottom: 60px; padding-top: 60px; width: 1226px; /*height: 1791px; */ background-color:#fff;} .center-phone {background-color: yellow; } .phone-title {} .phone-content { height: 628px; background-color: pink; } .phone-left { width: 234px; height: 100%; background-color: darkseagreen; } .phone-right { overflow: hidden; /* Trigger BFC to achieve adaptive */ height: 100%; background-color:#ccc;} .phone-right > li { margin-bottom: 28px; /* Set the bottom margin */ padding-left: 14px; /* Use padding to simulate box spacing */float: left; /* width: 25%; height: 300px; background-color:#f00;background-clip: content-box; }. Center-household {background-color: yellow; } .household-title {} .household-content {height: 614px; } .household-content > li { position: relative; /* parent */ margin-left: 14px; Margin-bottom: 28px; margin-bottom: 28px; /* Sets the bottom margin */float: left; /* width: 234px; height: 300px; background-color:#d7d7d7;} .household-content > li:nth-child(1), .household-content > li:nth-child(6) {margin-left: 0; } /* Eliminate the first interval of each line */. Household-content > li:last-child p:first-child {position: absolute; /* * * */ top: 0; left: 0; right: 0; height: 143px; } .household-content > li:last-child p:last-child { position: absolute; /* * * */ bottom: 0; left: 0; right: 0; height: 143px; } .center-video { height: 343px; background-color: pink; } .video-title {} .video-content {height: 285px; } .video-content > li {float: left; /* width: 296px; height: 100%; } .video-content > li + li {margin-left: 14px; } target interval / * and * / / * -- -- -- -- -- -- -- -- bottom part -- -- -- -- -- -- -- - * /. Bottom {/ * height: 274 px; */ background-color:#fff;} .bottom-service { height: 80px; background-color: seagreen; } .bottom-service > ul {height: 100%; } .bottom-service > ul li { position: relative; /* Parent */ padding: 0 50px; /* Use padding to simulate box spacing */float: left; /* width: 20%; height: 100%; background-color: goldenrod; background-clip: content-box; }. Bottom-service > ul li + li::before {/* Position: absolute; /* * * */ top: 28px; left: 0; content:' '; /* False element must have content*/ width: 1px; height: 24px; background-color:# 999;
}
.bottom-links {
    height: 192px;
    background-color: #8545e0;} .links-left { width: 960px; height: 100%; background-color: yellow; } .links-left > ul {height: 100%; } .links-left > ul li { padding-right: 60px;float: left; /* width: 16.66666666667%; /* width: 16.66666666667%; height: 100%; background-color:#ff0000;background-clip: content-box; }. Links-right {width: 252px; height: 100%; background-color: yellow; } / * -- -- -- -- -- -- -- -- footer part -- -- -- -- -- -- -- -- - * / footer {margin: 0 auto; padding: 30px 0; width: 1226px; height: 166px; } .footer-info { height: 57px; background-color:#6effb1;
}
.info-left {
    width: 630px;
    height: 100%;
}
.info-right {
    width: 436px;
    height: 100%;
}
.footer-slogan {
    margin-top: 30px;
    height: 19px;
    background-color: #8545e0;
}

Copy the code

The above is optimized after the code, due to the next talent, the method is not guaranteed to be the most simple, optimization is certainly not the best, just one of my ideas, you reference reference.

8.1.2 Flexbox+Grid

HTML code:

<body>
<div class="header">
    <div class="container">
        <div class="header-left"></div>
        <div class="header-rigth"></div>
    </div>
</div>
<div class="top">
    <div class="container">
        <div class="top-nav"></div>
        <div class="top-slider">
            <div class="slider-navbar"></div>
        </div>
        <div class="top-recommend-left"></div>
        <div class="top-recommend-right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="top-flashsale-title"></div>
        <div class="top-flashsale-timer"></div>
        <ul class="top-flashsale-shops">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<div class="center">
    <div class="center-phone-title"></div>
    <div class="center-phone-content">
        <div class="phone-content-item1"></div>
        <div class="phone-content-item2"></div>
        <div class="phone-content-item3"></div>
        <div class="phone-content-item4"></div>
        <div class="phone-content-item5"></div>
        <div class="phone-content-item6"></div>
        <div class="phone-content-item7"></div>
        <div class="phone-content-item8"></div>
        <div class="phone-content-item9"></div>
    </div>

    <div class="center-household-title"></div>
    <div class="center-household-content">
        <div class="row">
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
        </div>
        <div class="row">
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
            <div class="household-content-item"></div>
            <div class="household-content-item">
                <p></p>
                <p></p>
            </div>
        </div>


    </div>

    <div class="center-video-title"></div>
    <ul class="center-video-content">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div class="bottom">
    <div class="container">
        <div class="bottom-service">
            <div class="service-item"></div>
            <div class="service-item"></div>
            <div class="service-item"></div>
            <div class="service-item"></div>
            <div class="service-item"></div>
        </div>
        <div class="bottom-links-left">
            <div class="links-left-item"></div>
            <div class="links-left-item"></div>
            <div class="links-left-item"></div>
            <div class="links-left-item"></div>
            <div class="links-left-item"></div>
            <div class="links-left-item"></div>
        </div>
        <div class="bottom-links-right"></div>
    </div>
</div>
<div class="footer">
    <div class="footer-info">
        <div class="info-left"></div>
        <div class="info-right"></div>
    </div>
    <div class="footer-slogan"></div>
</div>
</body>

Copy the code

The CSS code:

/ * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- to extract common style -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * / * {/ * for convenience, so empty the default styles * / margin: 0; padding: 0; list-style: none; } body { background-color:#f5f5f5;display: grid; */ grid-template-columns: 1fr 1226px 1fr; grid-template-rows: 40px 20px auto auto 274px 166px; grid-template-areas:"header header header"
        ".." 
        "top top top"
        ". center ."
        "bottom bottom bottom"
        ". footer ."; }. Container {/* Horizontal centered content box */ width: 1226px; height: 100%; margin: 0 auto; border: 1px solid#f00;
}
.top-recommend-right,
.top-flashsale-timer,
.top-flashsale-shops li,
.center-phone-content > div,
.center-household-content .row,
.household-content-item:last-of-type p,
.center-video-content li,
.service-item,
.links-left-item,
.info-left,
.info-right,
.info-right {border: 1px solid # 000; } /* Add the border style for easy observation, not for layout, can be deleted *// * -- -- -- -- -- the header part -- -- -- -- - * /. The header {grid - area: the header; /* Specify the grid area */ background-color:# 333;
}
.header .container {
    display: flex;
    justify-content: space-between;
}
.header-left {
    width: 380px;
    background-color: #0f0;
}
.header-rigth {
    width: 260px;
    background-color: #0f0;} / * -- -- -- -- -- -- -- -- top part -- -- -- -- -- -- -- - * /. Top {grid - area: top; /* Specify the grid area */ background-color:#fff;} .top .container { display: grid; /* Grid-template-rows: 100px 460px 14px 170px 26px 58px 340px 40px; grid-template-columns: auto 14px 978px; grid-template-areas:"top-nav top-nav top-nav"
        "top-slider top-slider top-slider"
        ".."
        "recommend-left . recommend-right"
        ".."
        "flashsale-title flashsale-title flashsale-title"
        "flashsale-timer . flashsale-shops"
        "..";
}
.top-nav {
    grid-area: top-nav;
    background-color: #f00;
}
.top-slider {
    position: relative;
    grid-area: top-slider;
    background-color: #00f;} .top-slider .slider-navbar { position: absolute; top: 0; left: 0; bottom: 0; width: 234px; background-color: black; opacity: .5; } .top-recommend-left { grid-area: recommend-left; background-color: skyblue; } .top-recommend-right {grid-area: recommend-right; } .top-recommend-right > ul { display: flex; justify-content: space-between; height: 100%; } .top-recommend-right li { width: 316px; background-color: deepskyblue; } .top-flashsale-title { grid-area: flashsale-title; background-color:# 000;
}
.top-flashsale-timer {
    grid-area: flashsale-timer;
    background-color: #fff;
}
.top-flashsale-shops {
    display: flex;
    justify-content: space-between;
    grid-area: flashsale-shops;
    background-color: #6effb1;} .top-flashsale-shops li {width: 234px; } / * -- -- -- -- -- -- -- -- center part -- -- -- -- -- -- -- - * /. Center {margin - bottom: 60 px; Padding-top: 60px; padding-top: 60px; padding-top: 60px; grid-area: center; /* Display: flex; flex-direction: column; background-color:#fff;} .center-phone-title { height: 58px; background-color: black; } .center-phone-content { margin-bottom: 8px; display: grid; / / grid-template-columns: repeat(5, 1fr); / / grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); grid-template-areas:"big1 normal2 normal3 normal4 normal5"
        "big1 normal6 normal7 normal8 normal9"; grid-gap: 14px; /* grid spacing */ height: 628px; background-color: pink; } .phone-content-item1 {grid-area: big1; } .phone-content-item2 {grid-area: normal2; } .phone-content-item3 {grid-area: normal3; } .phone-content-item4 {grid-area: normal4; } .phone-content-item5 {grid-area: normal5; } .phone-content-item6 {grid-area: normal6; } .phone-content-item7 {grid-area: normal7; } .phone-content-item8 {grid-area: normal8; } .phone-content-item9 {grid-area: normal9; } .center-household-title { height: 58px; background-color: black; } .center-household-content { margin-bottom: 8px; display: flex; flex-direction: column; height: 614px; background-color: pink; } .center-household-content .row { display: flex; justify-content: space-between; flex: 1; } .row .household-content-item { display: flex; flex-direction: column; justify-content: space-between; width: 234px; background-color:#fff;} .household-content-item:last-of-type p {height: 143px; } .center-video-title { height: 58px; background-color: black; } .center-video-content { display: flex; justify-content: space-between; height: 285px; background-color: pink; } .center-video-content li {width: 296px; } / * -- -- -- -- -- -- -- -- bottom part -- -- -- -- -- -- -- - * /. Bottom {grid - area: the bottom; /* Specify the grid area */ background-color:#fff;
}
.bottom .container {
    display: grid;
    grid-template-columns: auto 252px;
    grid-template-rows: 80px auto;
    grid-template-areas: "service service" "links-left links-right"; } .container .bottom-service { display: flex; grid-area: service; background-color: seagreen; } .service-item {flex: 1; } .container .bottom-links-left { display: flex; grid-area: links-left; background-color: yellow; } .links-left-item {flex: 1; } .container .bottom-links-right { grid-area: links-right; background-color: yellowgreen; } / * -- -- -- -- -- -- -- -- footer part -- -- -- -- -- -- -- -- - * / footer {padding: 30 px 0; grid-area: footer; }. Footer-info {display: flex; justify-content: space-between; height: 57px; background-color:#6effb1;} .info-left {width: 630px; } .info-right {width: 436px; } .footer-slogan { margin-top: 30px; height: 19px; background-color:#8545e0;
}

Copy the code

Ix. Other Supplements:

9.1 Mobile ViewPort

Set the viewport:

<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = 0">

Copy the code

9.2 Media Query

Code examples:

@media (max-width: 767px) { ... CSS code... } @media (min-width: 768px) and (max-width: 991px) { ... CSS code... } @media (min-width: 992px) and (max-width: 1199px) { ... CSS code... } @media (min-width: 1200px) { ... CSS code... }Copy the code

9.3 REM

9.4 Flexbox

9.5 CSS Grid

Thank you End:

Thank you for reading, click on favorites or Star if you like! Your support is my biggest motivation, thank you!