HTML 网页布局

网站通常在多栏中显示内容，HTML 网页布局搞定网页显示的大体框架。

常见的网页布局

上中下布局：整个网页分为页头、内容、页脚三部分
- 无导航的上中下布局
- 带左侧导航的上中下布局
- 带右侧导航的上中下布局
侧边布局：整个网页主体分为左右两列，一般左侧为导航区，左侧为内容区。内容区根据实际情况也会采用上中下布局。

网页布局发展经历了很多，比如使用表格 table 布局，使用 div 元素布局等，但是随着 html5 语义元素的出现，使用语义元素的布局更容易阅读和理解，更具有通用型。

无导航的上中下网页布局

代码如下：

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <title>上中下网页布局</title>
    <style>
      * {
        color: #fff;
        text-align: center;
        margin: 0;
        padding: 0;
      }

      header,
      footer {
        height: 64px;
        background-color: #7dbcea;
        line-height: 64px;
      }

      section {
        height: 320px;
        background-color: rgba(16, 142, 233, 1);
        line-height: 320px;
      }
    </style>
  </head>

  <body>
    <header>
      <h2>页头</h2>
    </header>
    <section>
      <h2>内容</h2>
    </section>
    <footer>
      <h2>页脚</h2>
    </footer>
  </body>
</html>

带左侧导航的上中下网页布局

同样是上中下布局，只是内容区左侧增加左侧导航。如果留有边距，则应用于展示类网站，比如商品展示页面；如果两边不留边距，则应用于应用型网站，比如管理后台。

<!DOCTYPE html>
<html lang="zh-Hans">

<head>
  <title>带左侧导航的上中下布局</title>
  <style>
    * {
      color: #fff;
      text-align: center;
      margin: 0;
      padding: 0;
    }

    header,
    footer {
      height: 64px;
      background-color: #7dbcea;
      line-height: 64px;
    }

    section {
      height: 320px;
      background-color: rgba(16, 142, 233, 1);
      line-height: 320px;
      display: flex;
    }

    section>aside {
      width: 320px;
      background-color: #3ba0e9;
    }

    section>article {
      flex: 1;
    }

  </style>
</head>

<body>
  <header>
    <h2>页头</h2>
  </header>
  <section>
    <aside>
      <h2>左侧导航</h2>
    </aside>
    <article>
      <h2>内容</h2>
    </article>
  </section>
  <footer>
    <h2>页脚</h2>
  </footer>
</body>

</html>

带右侧导航的上中下网页布局

这个和带左侧导航的上中下网页布局相同，只是导航区域从左边到了右边。

<!DOCTYPE html>
<html lang="zh-Hans">

<head>
  <title>带右侧导航的上中下布局</title>
  <style>
    * {
      color: #fff;
      text-align: center;
      margin: 0;
      padding: 0;
    }

    header,
    footer {
      height: 64px;
      background-color: #7dbcea;
      line-height: 64px;
    }

    section {
      height: 320px;
      background-color: rgba(16, 142, 233, 1);
      line-height: 320px;
      display: flex;
      flex-direction: row-reverse;
    }

    section>aside {
      width: 320px;
      background-color: #3ba0e9;
    }

    section>article {
      flex: 1;
    }

  </style>
</head>

<body>
  <header>
    <h2>页头</h2>
  </header>
  <section>
    <aside>
      <h2>右侧导航</h2>
    </aside>
    <article>
      <h2>内容</h2>
    </article>
  </section>
  <footer>
    <h2>页脚</h2>
  </footer>
</body>

</html>

注意上面的代码，导航显示在左边和右边，并没有调整 html 代码，而是完全通过 CSS 控制，所有 CSS 是很强大的，完全可能在一套 html 代码的情况下，实现不同的布局。在 CSS 教程中可以了解更多 CSS 的知识。

侧边布局

在侧边布局中，整个网页主体分为左右两列，一般左侧为导航区，左侧为内容区。内容区根据实际情况也会采用上中下布局。

<!DOCTYPE html>
<html lang="zh-Hans">

<head>
  <title>侧边布局</title>
  <style>
    * {
      color: #fff;
      text-align: center;
      margin: 0;
      padding: 0;
    }

    body {
      display: flex;
    }

    body>aside {
      width: 320px;
      background-color: #3ba0e9;
      line-height: 448px;
    }

    body>section {
      flex: 1;
    }

    header,
    footer {
      height: 64px;
      background-color: #7dbcea;
      line-height: 64px;
    }

    article {
      height: 320px;
      background-color: rgba(16, 142, 233, 1);
      line-height: 320px;
    }

  </style>
</head>

<body>
  <aside>
    <h2>左侧导航</h2>
  </aside>
  <section>
    <header>
      <h2>页头</h2>
    </header>
    <article>
      <h2>内容</h2>
    </article>
    <footer>
      <h2>页脚</h2>
    </footer>
  </section>
</body>

</html>

总结

网页布局提供了一个网页的基础框架，我们可以根据自己的实际情况调整。真实的网页布局不是这么简单，但是基本上有基本的框架衍生而来。采用一个基本框架，然后在局部中可能会套用另外的框架布局，从而形成一个自己的框架。

HTML 网页布局

无导航的上中下网页布局

带左侧导航的上中下网页布局

带右侧导航的上中下网页布局

侧边布局

总结

目录