HTML+CSS 实例教程 - 制作一个响应式三栏布局的网页

前两天学了一下 CSS Flex 弹性盒子布局。写代码这种事情重在实践，光学不行。所以本着学以致用的想法，今天尝试使用 Flex 弹性布局来完成一个简单的响应式三栏页面布局。

设计图

动手之前要确定目标。对于前端展示用的界面，首先要确定设计方案。我的想法是移动设备优先，使用响应式布局的自适应布局方案。这样可以让做出来的网页在不同大小的屏幕上都能获得可用的显示效果。

内容方面主要分为三大块：

网站 Logo 和菜单等信息，定义为「站点导航」区域。
网站文章列表或内容等信息，定义为「主要内容」区域。
网站热门文章，最新留言等信息，定义为「其他内容」区域。

打开绘图软件，先确定了手机端小屏幕下的这三块内容的显示布局。

小屏幕显示空间有限，只能采用这种上下布局的结构。在稍微大一点的屏幕上，比如平板电脑，就可以把「站点导航」区域移到左边了。

再大一点的电脑显示器，就可以采用三栏布局。

确定了设计思路，目标就清晰了。接下来开始写 HTML 代码。

编写 HTML

根据上面的设计图，我定义了下面的 HTML 代码结构。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>a blog site</title>
</head>
<body>
    <header id="page-header">
        <p>站点导航</p>
    </header>
    <main>
        <div id="page-content">
            <p>主要内容</p>
        </div>
        <footer id="page-footer">
            <p>其他内容</p>
        </footer>
    </main>
</body>
</html>

我单独用 main 标签包住了「主要内容」和「其他内容」这两个内容块元素。为什么不把它们和「站点导航」内容块放在同一级呢？因为在平板显示模式下，站点导航是一栏，主要内容和其他内容同属一栏。如果把他们和「站点导航」内容块放到同一级，使用 Flex 弹性盒这种一维布局方式会不太好处理。

HTML 元素准备好，开始写 CSS 代码。

编写 CSS

按照移动设备优先的设计思想，先来完成手机端的 CSS 代码：

html, body {
    margin: 0;
    padding: 0;
}

#page-header, #page-content, #page-footer {
    color: rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 4em;
    height: 300px;
}

#page-header p, #page-content p, #page-footer p {
    margin: 0;
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#page-header {
    background-color: #8AACD4;
}

#page-content {
    background-color: #FFF;
}

#page-footer {
    background-color: #D2D2D2;
}

因为移动端设备的小屏幕使用从上到下的流式布局设计，所以这里没什么特殊的定义。也就内容区域中的 p 标签为了配合设计图效果，使用了 Flex 弹性布局的垂直居中显示样式。

接下来完成稍大一点屏幕上两栏布局显示的 CSS 代码：

@media screen and (min-width: 640px) {
    html, body {
        height: 100%;
    }

    body {
        display: flex;
    }

    #page-header {
        width: 200px;
        height: 100%;
    }

    #page-header p {
        padding: 0 0.5em;
    }

    main {
        flex: auto;
        height: 100%;
    }

    #page-content, #page-footer {
        height: 50%;
    }
}

这里用到了 CSS 的 media query 功能。@media screen and (min-width: 640px) { 中包含的 CSS 代码只会在浏览器窗口达到 640 像素及以上时使用。

最后是更大屏幕上三栏布局的 CSS 代码：

@media screen and (min-width: 800px) {
    main {
        display: flex;
    }

    #page-content {
        flex: auto;
        height: 100%;
    }

    #page-footer {
        width: 200px;
        height: 100%;
    }

    #page-footer p {
        padding: 0 0.5em;
    }
}

上面的 CSS 同样使用 media query 功能，并限制只在浏览器窗口达到 800 像素时使用。

最终成果

这是最终在不同大小浏览器上的显示效果截图：

这样一个可以适应不同屏幕大小的响应式布局网页就完成了，接下来只需要在不同的内容块中放置需要显示的内容即可。受限于内容范畴和文章篇幅，后面有机会分享网站功能开发时再继续展开。

HTML+CSS 实例教程 - 制作一个响应式三栏布局的网页

设计图

编写 HTML

编写 CSS

最终成果

上一篇

下一篇