一、PC端通用布局解决方案

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PC端布局的通用解决方案</title>
    <style>
      /* 初始化 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      a {
        color: #666;
        text-decoration: none;
      }
      /* 将body转为flex */
      body {
        min-width: 680px;
        display: flex;
        /* 主轴垂直方向,不换行 */
        flex-flow: column nowrap;
        background-color: lightgrey;
        background-image: url("4.jpg");
        background-repeat: no-repeat;
        background-size: cover;
      }
      header,
      footer {
        height: 50px;
        border: 1px solid #000;
        background-color: #111;
      }
      /* 将页眉转为flex */
      header {
        display: flex;
        /* 所有项目在交叉轴方向上居中显示 */
        align-items: center;
      }
      header > a {
        flex: 0 1 100px;
        text-align: center;
        color: whitesmoke;
      }
      header > a:nth-of-type(n + 2) {
        margin: auto;
      }
      /* Logo */
      header > a:first-of-type {
        margin-right: 50px;
        margin-left: 50px;
        font-style: italic;
        font-size: 20px;
      }
      header > a:last-of-type {
        margin-left: auto;
        margin-right: 0;
      }
      /* 鼠标悬停时忽略logo */
      header > a:hover:not(:first-of-type) {
        color: coral;
        font-size: 1.2rem;
      }
      .container {
        min-height: 580px;
        margin: 10px auto;
        display: flex;
        justify-content: center;
      }
      .container > aside,
      .container > main {
        border: 1px solid #000;
        padding: 10px;
      }
      .container > aside {
        flex: 0 0 200px;
        background-image: url("3.jpg");
        background-size: cover;
        background-position: -63px;
        filter: blur(-1px);
        color: black;
      }
      .container > .astwo {
        background-image: url("5.jpg");
        background-size: cover;
      }
      .container > aside > .left {
        width: 200px;
        height: 500px;
        display: flex;
        flex-flow: column wrap;
        justify-content: space-evenly;
        font-size: 30px;
      }
      .container > aside > .left > p {
        width: 200px;
        text-align: center;
      }
      .container > main {
        flex: 0 0 600px;
        margin: 0 10px;
      }
      .container > main > .main-center {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
      }
      .container > main > .main-center > .main-center-word {
        width: 100%;
        font-weight: bold;
        letter-spacing: 0.5rem;
        text-indent: 2.5rem;
        line-height: 2rem;
      }
      .container > .astwo {
        writing-mode: vertical-lr;
        writing-mode: tb-lr;
        font-size: 16px;
        letter-spacing: 0.5rem;
        text-indent: 2.5rem;
        line-height: 2rem;
        vertical-align: center;
      }
      footer {
        display: flex;
        flex-flow: column nowrap;
        text-align: center;
        height: 100px;
      }
      footer > p {
        font-size: 25px;
        color: pink;
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <!-- 页眉 -->
    <header>
      <a href="">LOGO</a>
      <a href="">首页</a>
      <a href="">导航1</a>
      <a href="">导航2</a>
      <a href="">导航3</a>
      <a href="">登录</a>
    </header>
    <!-- 主体 -->
    <div class="container">
      <!-- 左边栏 -->
      <aside>
        <div class="left">
          <p class="pa">下沙篇</p>
          <p class="pa">王权篇</p>
          <p class="pa">月红篇</p>
          <p class="pa">千颜篇</p>
        </div>
      </aside>
      <!-- 主体内容区 -->
      <main>
        <div class="main-center">
          <div class="main-center-word">
            漫画的创作灵感来源于中国古典神话。小新认为，
            爱情是文艺创作的一个永恒主题。他把从角色中感受
            到的情绪用自己的理解展现出来，再加上中国神话，
            就创作出了《狐妖小红娘》这个“玄幻搞笑纯情虐恋”的故事。
            2010年，庹小新以“雪花啊”的名字在有妖气原创漫画梦工厂
            连载漫画《狐狸精调教手册》。2012年，被漫友旗下周刊热
            门杂志《漫画SHOW》邀请连载，并更名《狐妖小红娘》，
            故事基于《狐狸精调教手册》重新设计，但保留原来的人物
            （除了王富贵外，名字和造型略有改动）以及人物性格
            、故事背景。画面全部重画。但其后遭遇杂志停刊。
            2013年，《狐妖小红娘》登陆腾讯动漫频道， 成为平台主推连载作品。
          </div>
        </div>
      </main>
      <!-- 右边栏 -->
      <aside class="astwo">
        根据古典小说记载，世上有人有妖，妖会与人相恋，
        妖寿命千万年。人的寿命有限，人死了，妖活着。人会投胎转世，但投胎
        以后，不记得上辈子的爱。妖如果痴情的话，就去找狐妖“购买”一项服务，
        让投胎转世的人，回忆起前世的爱。
      </aside>
    </div>
    <!-- 页脚 -->
    <footer>
      <p>《狐妖小红娘》</p>
    </footer>
  </body>
</html>