标准通用布局

css

       .header{
    margin:0 auto; 
    max-width: 960px;
    height:100px;
    background-color: rgb(0, 217, 255);
}
.content{
    margin: 0 auto;
    max-width: 960px;
    height: 400px;
    background-color: rgb(255, 127, 227);
}
.footer{
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: rgb(255, 0, 76);
}

布局

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

适合首页布局带nav

css

        .header{
    margin:0 auto;
    max-width: 960px;
    height:100px;
    background-color: rgb(18, 213, 219);
}
.nav{
    margin: 0 auto;
    max-width: 800px;
    background-color: rgb(151, 11, 156);
    height: 50px;
}
.content{
    margin: 0 auto;
    max-width: 800px;
    height: 400px;
    background-color: aquamarine;
}
.footer{
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: aqua;
}

布局

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

侧边栏固定右边自适应

css

.parent {
  display:flex;
}  
.left{
    width: 200px;
    background-color: pink;

}
.right {
  flex:1;
  background-color: rgb(12, 180, 209);
}

布局

  <div class="parent" >
        <div class="left" >
            <p>left</p>
        </div>
        <div class="right"  >
            <p>right</p>
            <p>right</p>
        </div>        
    </div>

---

Grid布局(用的很少)

完成图同上

css

.parent {
  display:grid;
  grid-template-columns:auto 1fr;
  grid-gap:20px
} 

布局

 <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>        
    </div>

圣杯布局(两边固定 中间自适应)

css

          .container {
    padding-left: 220px;
    padding-right: 220px;
  }
  .left {
    float: left;
    width: 200px;
    height: 400px;
    background: rgb(14, 203, 209);
    margin-left: -100%;
    position: relative;
    left: -220px;
  }
  .center {
    float: left;
    width: 100%;
    height: 500px;
    background: rgb(224, 9, 178);
  }
  .right {
    float: left;
    width: 200px;
    height: 400px;
    background: pink;
    margin-left: -200px;
    position: relative;
    right: -220px;
  }

布局

   <article class="container">
        <div class="center">
          <h2>圣杯布局</h2>
        </div>
        <div class="left"></div>
        <div class="right"></div>
      </article>

圣杯布局(双飞翼 两边固定在父盒子里)

css

            .container {
        min-width: 600px;
    }
    .left {
        float: left;
        width: 200px;
        height: 400px;
        background: rgb(238, 94, 231);
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 500px;
        background: rgb(6, 248, 188);
    }
    .center .inner {
        margin: 0 200px; 
    }
    .right {
        float: left;
        width: 200px;
        height: 400px;
        background: rgb(34, 106, 241);
        margin-left: -200px;
    }

布局

 <article class="container">
        <div class="center">
            <div class="inner">双飞翼布局</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </article>

圣杯布局(双飞翼 等高)

css

            .container {
        min-width: 600px;
    }
    .left {
        float: left;
        width: 200px;
        height: 400px;
        background: rgb(4, 173, 240);
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 500px;
        background: rgb(12, 240, 240);
    }
    .center .inner {
        margin: 0 200px;
    }
    .right {
        float: left;
        width: 200px;
        height: 400px;
        background: rgb(201, 18, 218);
        margin-left: -200px;
    }

              .center,
      .left,
      .right {
        padding-bottom: 10000px;
        margin-bottom: -10000px;
      }
      .container {
        padding-left: 220px;
        padding-right: 220px;
        overflow: hidden;
      }

布局

  <article class="container">
        <div class="center">
            <div class="inner">双飞翼布局</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </article>

边框定位(右侧边栏布局)

css

        #wrapper {
  width: 960px;
  margin: 0 auto;
}
#mainContent {
  border-right: 220px solid #dfdfdf;
  position: absolute;
  width: 740px;
  height: 800px;  
  background: rgb(4, 174, 241);
}
#sidebar {
  background: #ff06ff;
  margin-left: 740px;
  position: absolute;
  height: 800px;
  width: 220px;
}

布局

<div id="wrapper">
        <div id="mainContent">...</div>
        <div id="sidebar">...</div>
    </div>

全屏布局(类似 手机布局)

css

           * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;
      }
      #wrap {
        min-height: 100%;
        background: pink;
        text-align: center;
        overflow: hidden;
      }
      #wrap .main {
        padding-bottom: 50px;
      }
      #footer {
        height: 50px;
        line-height: 50px;
        background: deeppink;
        text-align: center;
        margin-top: -50px;
      }

布局

<div id="wrap">
        <div class="main">
          main <br />
          main <br />
          main <br />
        </div>
      </div>
      <div id="footer">footer</div>