HTML 网页布局

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

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

常见的网页布局

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

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

无导航的上中下网页布局

上中下是很常见的网页布局,整个网页分为页头、内容、页脚三部分,常用于各种 CMS 网站和博客网站的内容页面,页头通常是网站 logo 和顶部导航,内容区是文章,页脚则是版权声明等信息。

无导航的上中下网页布局
无导航的上中下网页布局

代码如下:

<!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>

总结

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