我们的演示HTML和CSS网站概述

在本教程中，您将探索演示网站的结构以及在接下来的教程中重新创建它的计划。

示范网站概览

在视觉上，该站点可以分为七个水平部分：

在前面的概览图中，七个部分中的每一个都被相应地标记：

“标题”部分（在顶部）。本节的说明在我们的教程如何使用 CSS 构建网站的标题部分（第 1 节）中有详细说明
“关于我”部分（从上数第二个）。 Instructions for this section are detailed in our tutorial [How To Build the About Me Section of Your Website With CSS (Section 2)] (how-to-build-the-about-me-section-of-your-website-with-css-section-2)
“项目”部分（从上数第三个）。本节的说明在我们的教程如何使用 CSS 构建平铺布局（第 3 节）中有详细说明
“体验”部分（从上数第四个）。 Instructions for this section are detailed in our tutorial [How To Add a Resume or Work History Section To Your Website With CSS (Section 4)].(how-to-add-a-resume-or-work-history-section-to-your-website-with-css-section-4)
“教育”和“技能”部分（从上数第五个）。本节的说明在我们的教程如何使用 CSS 将您的教育历史和技能添加到您的网站（第 5 节）中有详细说明
特色报价部分（从上数第六个）。本节的说明在我们的教程如何使用 CSS 在您的网站上创建精选引用框（第 6 节）中有详细说明
静态页脚，“粘”在页面底部。本节的说明在我们的教程如何使用 CSS 创建静态页脚（第 7 节）中有详细说明

这些部分中的每一个都是使用您在本教程系列的前半部分中探索的 HTML 元素的 CSS 属性创建的。在本教程系列的其余部分中，您将在各自的教程中重新构建这些部分。如果您刚刚开始学习 CSS，我们建议您复制教程中的样式选择，包括大小、颜色和背景图像，以在您完成每个教程时与示例保持一致。

在本教程系列的末尾，有一些关于试验网站风格和布局的建议。这些建议将演示如何个性化内容并重新组合这些教程，为您的网站创建新的样式和排列可能性。

在本教程中，您探索了演示网站的结构以及重新创建它的计划的概述。在下一个教程中，您将创建一个 CSS 规则来设置网页的整个正文的样式，并了解为什么此规则是重要的第一步。