preface

Why am I interested in writing an article today about CSS layouts that we use all the time? I’m sure every front-end engineer has had periods of confusion in their development: JS and HTML write smoothly and quickly, but when it comes to complex or unexperienced style Settings, it takes a long time to deal with or even gets stuck on a small issue. But as a front-end engineer rather than a javascript engineer, HTML, CSS, and javascript are all necessary. Here’s a look at some of the most common layouts and source code. It mainly includes: full-screen upper, middle and lower layout mode, center layout mode, multi-column layout mode, cross-row/cross-column layout mode, single column with equal width, other column adaptive layout mode, etc. So let’s get started.

1. Header +main+footer layout

The effect of the layout is as follows, which has the characteristics of: top, body and bottom three parts, three parts fill the left and right screen, header and footer height fixed, main height adaptive. You can open the PC web version of QQ Music to view, you can find three obvious parts.

Method 1

Position +top/right/bottom/left Use left:0 and right:0 for header, main, and footer. Header and footer are drawn to the top and bottom using top:0 and bottom:0 respectively, and the height is set to a fixed value; Set top and bottom of main to header height and footer height, respectively. The header, main, and footer are fixed in specific positions by absolute positioning without interference. HTML

<div class="wrapper">
  <div class="header"></div>
  <div class="main"></div>
  <div class="footer"></div>
</div>
Copy the code


CSS

.wrapper {
  position: relative;
  width: 300px;
  height: 300px; 
}
.header,
.main,
.footer {
  position: absolute;
   left: 0;
   right: 0;
}
.header {
    top: 0;
    height: 40px;
    background-color: #007FFF;
  }
.main {
    top: 40px;
    bottom: 40px;
    background-color: #f0f0f0;
  }
.footer {
    bottom: 0;
    height: 40px;
    background-color: #009900;
  }
Copy the code

The Code for the above layout has been placed on the Pen, please go to: Code Pen Position +top/right/bottom/left implementation

Way 2

Flex layout implementation. I personally prefer this approach because the Flex implementation is so convenient and looks simple. When we set display: flex, we also need to set Flex-direction: column to be vertical. Since you want both the header and footer to have a top and bottom effect, you need to set the main height to be adaptive, which flex: 1 does. In fact, most of the layouts we see can be easily implemented in Flex, so we are often called Flex programmers. HTML

<div class="wrapper">
  <div class="header"></div>
  <div class="main"></div>
  <div class="footer"></div>
</div>
Copy the code

CSS

.wrapper {
  display:flex;
  flex-direction: column;
  width: 300px;
  height: 300px;
}
.header {
  height: 40px;
  background-color: #007FFF;
}
.main {
  flex: 1;
  background-color: #f0f0f0;  
}
.footer {
  height: 40px;
  background-color: #009900;
}
Copy the code

Pen link: Code Pen display: Flex implementation

Multi-column layouts

Two columns of the layout

The two-column layout has been specifically mentioned in the blog before, so please check it out here: unlock the commonly used two-column layout

Three column layout

First, take a look at the effect diagram of the three-column layout (as shown below), which is also the classic layout effect of the front end. Generally, there are 2 columns with fixed width, and the remaining 1 column with adaptive width and the same height of the three columns.



HTML

<div class="wrapper">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>
Copy the code

CSS

.wrapper {
  width: 300px;
  height: 300px;
}
.left {
  float: left;
  width: 60px;
  height: 100%;
  background-color: #007FFF;
}
.middle {
  float: left;
  width: 80px;
  height: 100%;
  background-color: #222222;
}
.right {
  overflow: hidden;
  height: 100%;
  background-color: #009900;
}
Copy the code

To try it yourself, go to the Code Pen three-column layout

Navigation bar implementation

The tabs navigation function is similar to that of tabs. As the cursor moves down, it moves with the cursor first, and the underscore appears from left to right when the cursor moves from left to right, and from right to left when the cursor moves from right to left. The length of the underline must be the same as the length of the content.



HTML

<ul>
   <li>Home</li>
   <li>About</li>
   <li>Introduction</li>
  <li>Certificate</li>
  <li>Enquiry</li>
</ul>
Copy the code

CSS

ul { display: flex; position: absolute; width: 100%; top: 20px; left: 50%; transform: translate(-50%, -50%); } li { list-style: none; position: relative; padding: 20px; font-size: 24px; color: #222; line-height: 1; The transition: 0.2 s all linear; cursor: pointer; } li::before { content: ""; position: absolute; top: 0; left: 100%; width: 0; height: 100%; border-bottom: 2px solid #222; The transition: 0.2 s all linear; } li:hover::before { width: 100%; top: 0; left: 0; The transition - delay: 0.1 s; border-bottom-color: #222; z-index: -1; } li:hover ~ li::before { left: 0; } li:active { background: #222; color: #fff; }Copy the code

Code Pen Please move: Navigation – cursor move underline follow

Grail layout/Twin wing layout

Grail layout and twin wing layout are composed of three left, middle and right columns, which is a special layout in the three-column layout. It is characterized by fixed width of the left and right columns, adaptive width of the middle column and fixed and equal height of the three columns.

The two contrast

So let’s look at the differences between these two layouts.

  1. The holy grail layout
  • Layout: special layout in the three-column layout; The left and right columns are fixed, and the middle column is self-adaptive; Shaped like a holy grail;
  • Essence: Set left and right to float out of the document flow; Set the width of left and right to 60px and the width of middle to 100%. Left {margin-left: -60px; margin-left: -60px; margin-left: -60px; margin-left: -60px; margin-left: -60px; margin-left: -60px; margin-left: -60px; } .right {margin-left: -60px; }) finally, set the height of left,right, and middle to 100% to keep them the same height.
  • Application scenario: A common portal is used to introduce information
  1. Twin wing layout
  • Layout: special layout in the three-column layout; The left and right columns are fixed, and the middle column is self-adaptive; Shaped like a bird with outstretched wings;
  • Nature:
  • Application scenario: A common portal is used to introduce information

The holy grail layout



HTML

<div class="wrapper">
  <div class="left">
    <span>Left</span>
  </div>
  <div class="right">
    <span>Right</span>
  </div>
  <div class="middle">
    <span>Middle</span>
  </div>
</div>
Copy the code

CSS

.wrapper {
  padding: 0 60px;
  width: 300px;
  height: 300px;
  }
.left {
  float: left;
  margin-left: -60px;
  width: 60px;
  height: 100%;
  background-color: #007fff;
}
.right {
  float: right;
  margin-left: -60px;
  width: 60px;
  height: 100%;
  background-color: #009900;
}
.middle {
  height: 100%;
  background-color: #4d4d4d;
}
span {
  font-size: 16px;
  color: #ffffff;
}
Copy the code

Code Pen please move: Holy Grail layout

Twin wing layout

conclusion

CSS in the colorful world can use to describe, but during the development of our daily, some of the basic layout to sum up is not too much, once we know about these common layout after thoroughly, after get the prototype design, in my mind there will be a rough prototype, the prototype first ever again in his heart, The resulting pages will also fit more closely to the design requirements, reducing the possibility of rework.

That’s why I’m writing this blog in the first place.