Single column layout

Header, Content, and Footer width single column layout

For header,content, and footer, set width: 1000px; < span style = “max-width: 1000px; Then set margin:0 auto to center.

<! DOCTYPEhtml>
<html lang="en">

<! -- Single column layout with header, Content and footer width. -->
<! -- max-width:560px; Use the maximum width. When the width becomes smaller, it will be based on the actual browser width -->
<! -- width: 560px; Fixed width use width, when the width becomes smaller, there will be a scroll bar -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Single row layout</title>
    <style>
        .header {
            max-width: 1000px;
            height: 100px;
            background-color: yellowgreen;
            margin: 0 auto;
        }
        
        .content {
            max-width: 1000px;
            height: 500px;
            background-color: bisque;
            margin: 0 auto;
        }
        
        .footer {
            max-width: 1000px;
            height: 80px;
            background-color: burlywood;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>

</html>

Copy the code

2. Single column layout with header and footer equal width and slightly narrower content

<! DOCTYPEhtml>
<html lang="en">

<! -- Single column layout with header and footer equal width and slightly narrower content. Single column Layout (general column) -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .header {
            margin: 0 auto;
            max-width: 960px;
            height: 100px;
            background-color: cadetblue;
        }
        
        .content {
            margin: 0 auto;
            max-width: 800px;
            height: 400px;
            background-color: coral
        }
        
        .footer {
            margin: 0 auto;
            max-width: 960px;
            height: 100px;
            background-color: darkseagreen;
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>

</html>
Copy the code

Two column adaptive layout

A two-column adaptive layout is a layout in which one column is spread out by the content and the other column fills the remaining width

1. float+overflow:hidden

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Two column adaptive layout -float implementation</title>
    <style>
        .parent {
            overflow: hidden;
        }
        
        .left {
            float: left;
            background-color: darkseagreen;
        }
        
        .right {
            overflow: hidden;
            background-color: gold;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="left">
            LeftLeftLeft
        </div>
        <div class="right">
            Right
            <br> Right
        </div>
    </div>
</body>

</html>
Copy the code

Note: If the sidebar is on the right, pay attention to the rendering order. In HTML, you write the sidebar first and then the main content

The padding-bottom value must be large enough in. Left and. Right, and the margin–bottom value must be offset by the positive value of the padding-bottom.

.left {
    float: left;
    padding-bottom: 999px;
    margin-bottom: -999px;
    background-color: darkseagreen;
}
        
.right {
    overflow: hidden;
    padding-bottom: 999px;
    margin-bottom: -999px;
    background-color: gold;
}
Copy the code

2. Flexbox layout

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Two column adaptive layout - Flex implementation</title>
    <style>
        .parent {
            display: flex;
        }
        
        .left {
            background-color: greenyellow;
        }
        
        .right {
            flex: 1;
            background-color: khaki;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="left">
            LeftLeftLeftLeftLeftLeft
        </div>
        <div class="right">
            Right
            <br> Right
        </div>
    </div>
</body>

</html>
Copy the code

This method can achieve a two-column contour layout.

3. The grid layout

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Two column adaptive layout - Grid layout</title>
    <style>
        .parent {
            display: grid;
            grid-template-columns: auto 1fr;
        }
        
        .left {
            background-color: khaki;
        }
        
        .right {
            background-color: lightcoral;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="left">
            LeftLeft
        </div>
        <div class="right">
            Right
            <br> Right
        </div>
    </div>
</body>

</html>
Copy the code

This method can achieve a two-column contour layout.

Three column layout: left and right column width fixed, middle width adaptive

1. The float layouts

  • The left columnfloat:left, right columnfloat:right
  • Note: In HTML, write the side columns first and then the main content
<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Three column layout - Float layout implementation</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            height: 300px;
        }
        
        .left {
            float: left;
            width: 300px;
            background-color: bisque;
        }
        
        .center {
            background-color: cadetblue;
        }
        
        .right {
            float: right;
            width: 300px;
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</body>

</html>
Copy the code

2. Absolute positioning

Parent element relative positioning, child element absolute positioning (parent phase child absolute)

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Three column layout - Absolute positioning</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            position: relative;
        }
        
        .left {
            position: absolute;
            left: 0;
            width: 300px;
            height: 300px;
            background-color: chartreuse;
        }
        
        .center {
            position: absolute;
            left: 300px;
            right: 300px;
            height: 300px;
            background-color: coral;
        }
        
        .right {
            position: absolute;
            right: 0;
            width: 300px;
            height: 300px;
            background-color: cornflowerblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>
Copy the code

3. The flex layout

Middle column Settingsflex:1

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Three column layout - Flex layout</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            display: flex;
        }
        
        .left {
            width: 300px;
            height: 300px;
            background-color: cornflowerblue;
        }
        
        .center {
            flex: 1;
            height: 300px;
            background-color: darksalmon;
        }
        
        .right {
            width: 300px;
            height: 300px;
            background-color: darkorange;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>
Copy the code

4. The table layout

Parent element Settingsdisplay:table, and setwidth:100%; Child element Settingsdisplay:table-cell

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Three-column layout - Table layout</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            display: table;
            width: 100%;
        }
        
        .container div {
            display: table-cell;
            height: 300px;
        }
        
        .left {
            width: 300px;
            background-color: darksalmon;
        }
        
        .center {
            background-color: greenyellow;
        }
        
        .right {
            width: 300px;
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>
Copy the code

5. The grid layout

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Three column layout - Grid layout</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            display: grid;
            width: 100%;
            grid-template-rows: 300px;
            grid-template-columns: 300px auto 300px;
        }
        
        .left {
            background-color: darksalmon;
        }
        
        .center {
            background-color: greenyellow;
        }
        
        .right {
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>
Copy the code

Product character layout

1. Full-screen version: percentage width + float:left

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Font Layout 2 (Full screen)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 100%;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        
        .div1 {
            background-color: red;
        }
        
        .div2 {
            float: left;
            width: 50%;
            background-color: blue;
        }
        
        .div3 {
            float: left;
            width: 50%;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>

</html>
Copy the code

2. Float + margin-left + transform: translateX(-100%)

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Font layout 1</title>
    <style>
        body {
            overflow: hidden; {} *margin: 0;
            padding: 0;
        }
        
        div {
            margin: 0 auto;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        
        .div1 {
            background-color: red;
        }
        
        .div2 {
            float: left;
            margin-left: 50%;
            transform: translateX(-100%);
            background-color: blue;
        }
        
        .div3 {
            float: left;
            transform: translateX(-100%);
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</body>

</html>
Copy the code

Margin-left :50%

Final effect:

Grail layout: fixed left and right widths, adaptive middle widths

Please refer to http://47.98.159.95/my_blog/blogs/css/006.html

1. The flex layout

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>* {margin: 0;
      padding: 0;
    }
    .header..footer{
        height:40px;
        width:100%;
        background:red;
    }
    .container{
        display: flex;
    }
    .middle{
        flex: 1;
        background:yellow;
    }
    .left{
        width:200px;
        background:pink;
    }
    .right{
        background: aqua;
        width:300px;
    }
	</style>
</head>
<body>
    <div class="header">This is the head</div>
    <div class="container">
        <div class="left">On the left</div>
        <div class="middle">The middle section</div>
        <div class="right">On the right</div>
    </div>
    <div class="footer">So here's the bottom</div>
</body>
</html>
Copy the code

2. Float layout (all float:left)

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>* {margin: 0;
      padding: 0;
    }
    .header..footer {
      height: 40px;
      width: 100%;
      background: red;
    }

    .footer {
      clear: both;
    }

    .container {
      padding-left: 200px;
      padding-right: 250px;
    }

    .container div {
      position: relative;
      float: left;
    }

    .middle {
      width: 100%;
      background: yellow;
    }

    .left {
      width: 200px;
      background: pink;
      margin-left: -100%;
      left: -200px;
    }

    .right {
      width: 250px;
      background: aqua;
      margin-left: -250px;
      left: 250px; 
    }
  </style>
</head>

<body>
  <div class="header">This is the head</div>
  <div class="container">
    <div class="middle">The middle section</div>
    <div class="left">On the left</div>
    <div class="right">On the right</div>
  </div>
  <div class="footer">So here's the bottom</div>
</body>

</html>
Copy the code
  • Left box set margin-left: -100%

Then move 200px to the left to fill the empty padding-left portion:

  • Margin-left: -250px; margin-left: -250px; margin-left: -250px; margin-left: -250px

Then move 250px to the right to fill the padding-right portion of the parent container.

3. Float layout (left float: left, right float: right)

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>* {margin: 0;
      padding: 0;
    }
    .header..footer {
      height: 40px;
      width: 100%;
      background: red;
    }
    .container{
      overflow: hidden;
    }

    .middle {
      background: yellow;
    }

    .left {
      float: left;
      width: 200px;
      background: pink;
    }

    .right {
      float: right;
      width: 250px;
      background: aqua;
    }
  </style>
</head>

<body>
  <div class="header">This is the head</div>
  <div class="container">
    <div class="left">On the left</div>
    <div class="right">On the right</div>
    <div class="middle">The middle section</div>
  </div>
  <div class="footer">So here's the bottom</div>
</body>

</html>
Copy the code

4. Absolute positioning

Father in the son

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>* {margin: 0;
      padding: 0;
    }
    .header..footer {
      height: 40px;
      width: 100%;
      background: red;
    }
    .container{
      min-height: 1.2 em;
      position: relative;
    }

    .container>div {
      position: absolute;
    }

    .middle {
      left: 200px;
      right: 250px;
      background: yellow;
    }

    .left {
      left: 0;
      width: 200px;
      background: pink;
    }

    .right {
      right: 0;
      width: 250px;
      background: aqua;
    }
  </style>
</head>

<body>
  <div class="header">This is the head</div>
  <div class="container">
    <div class="left">On the left</div>
    <div class="right">On the right</div>
    <div class="middle">The middle section</div>
  </div>
  <div class="footer">So here's the bottom</div>
</body>

</html>
Copy the code

5. The grid layout

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body{
        display: grid;
    }
    #header{
        background: red;
        grid-row:1;
        grid-column:1/5;
    }
        
    #left{
        grid-row:2;
        grid-column:1/2;
        background: orange;
    }
    #right{
        grid-row:2;
        grid-column:4/5;
        background: cadetblue;
    }
    #middle{
        grid-row:2;
        grid-column:2/4;
        background: rebeccapurple
    }
    #footer{
        background: gold;
        grid-row:3;
        grid-column:1/5;
    }
  </style>
</head>

<body>
    <div id="header">header</div>
    <div id="left">left</div>
    <div id="middle">middle</div>
    <div id="right">right</div>     
    <div id="footer">footer</footer></div>
       
</body>

</html>
Copy the code

Twin wing layout

Use the classic float layout

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>* {margin: 0;
      padding: 0;
    }
    .container {
        min-width: 600px;
    }
    .left {
        float: left;
        width: 200px;
        height: 400px;
        background: red;
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 500px;
        background: yellow;
    }
    .center .inner {
        margin: 0 200px; 
    }
    .right {
        float: left;
        width: 200px;
        height: 400px;
        background: blue;
        margin-left: -200px;
    }
  </style>
</head>

<body>
  <article class="container">
    <div class="center">
        <div class="inner">Twin wing layout</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</article>
</body>

</html>
Copy the code