如何使用CSS构建平铺布局（第3节）

介绍

在本教程中，您将通过使用 CSS 类设置八个 HTML <div> 容器的样式来重新创建演示网站的“项目”部分的平铺布局。您还将向这些元素添加 hover 伪类，以便当用户将鼠标悬停在它们上方时它们会改变颜色。如果您想个性化尺寸，请随意切换 Sammy 的信息。您在此处使用的方法可以应用于其他 CSS/HTML 网站项目。

先决条件

要学习本教程，请确保您已按照本系列如何设置 CSS 和 HTML 练习项目中的前一个教程中的说明设置了必要的文件和文件夹。

添加和设置标题标题

首先，将标题“项目”添加到网页上的新部分，确保不要删除您从之前的教程中添加的任何内容。在 index.html 文件中最后一个关闭 </div> 标记之后添加以下代码片段：

索引.html

. . .
<!--Section 3: Projects-->

  <h2 >Projects</h2>
. . .

此代码片段的第一行是一个注释，用于标记您将添加以创建网站的第三部分的代码。注释用于保存对代码的解释性注释以供将来参考，浏览器不会向站点访问者显示（除非他们查看网页的源代码）。第二行添加标题文本“Projects”并为其分配标题元素 <h2>。

接下来，您将通过创建 section-heading 类来设置标题标题的样式。返回到 styles.css 文件，将以下代码段复制并粘贴到文件底部：

样式.css

. . .

/*  Section 3  */

.section-heading {
  text-align:center;
  color:#102C4E;
  margin-top: 150px;
  margin-bottom:70px;
  font-size: 35px;
}

此代码片段定义了 section-heading 类的样式。请查看本教程系列中有关设置 content、padding 和 margins 的大小的前面部分。

接下来，您将添加“section-heading”类到 HTML 文件中的标题“Projects”。返回到 index.html 文件并将类添加到 HTML 元素，如下所示：

索引.html

<!--Section 3: Projects—>

  <h2 class="section-heading">Projects</h2>

保存这两个文件并在浏览器中加载您的网页。有关加载 HTML 文件的说明，请访问我们的教程步骤如何在浏览器中查看脱机 HTML 文件。标题现在应该在页面上居中，并且它的大小、位置和颜色应该如下图所示进行调整：

添加平铺项目框并为其设置样式

现在，您将在节标题下方添加八个项目框。首先，您将创建一个 CSS 类，它允许我们设置 <div> 容器的样式，使它们中的四个并排放置在网页上。

返回styles.css文件，在文档底部添加如下代码片段：

样式.css

. . .
/* Sizing for Project Containers  */

.column-4 {
  float: left;
  width: 21%;
  padding: 10px;
  margin:20px;
  height: 250px;
}

在此代码片段中，您定义了类 column-4 并指定了允许在页面上并排显示四列的值：

float: left; 声明指示元素 float 到它所在的容器（在本例中为网页）的左侧，同时允许周围的内容（在本例中为其他项目框）休息在它的右侧。
width: 21%; 声明将元素的宽度设置为其容器宽度的 21% of，在本例中为网页。当您希望元素根据其所在容器的大小调整大小时，以百分比而不是像素设置大小（例如宽度）可能很有用。但是请注意，动态调整大小可能是一个棘手的过程——有多种方法可以创建响应式元素，这些方法可以在 CSS 中建立基础后实现。
如果您想了解有关其他声明的更多信息，请查看本教程系列中有关设置 content、padding 和 margins 的大小的前面部分。

接下来，您将为八个框的 each 创建一个类，以便您可以对它们进行不同的样式设置，并为第一个和最后一个框添加特色图像以匹配演示站点。要开始使用，请保存一张或两张图片以用作图片文件夹中的特色图片。如果您没有图片，您可以下载您在演示站点中使用的右向机器人和左向机器人的图像。

注意：要下载机器人图像，请访问链接并单击图像上的CTRL + Left Click（在Mac上）或Right Click（在Windows上），然后选择“图像另存为”并将其另存为 project-left.jpeg 和“project-right.jpeg”到您的图像文件夹。

要为每个项目框创建一个类，请将以下代码片段添加到 styles.css 文件的底部：

样式.css

. . .

/* Color and Images for Project Containers  */

.project-1 {
  background: url('../images/project-left.jpeg');
  background-size: cover;
}

.project-2 {
  background-color:white;
}

.project-3 {
  background-color:#209BFF;
}

.project-4 {
  background-color:#112d4e;
}

.project-5 {
  background-color:#F9F7F7;
}

.project-6 {
  background-color:#209BFF;
}

.project-7 {
    background-color:#ffffff00;
}

.project-8 {
  background: url('../images/project-right.jpeg');
  background-size: cover;
}

如果您使用自己的图像，请确保已将它们保存到您的图像文件夹中，并且您在规则集中的突出显示区域中为类 project-1 和类 project-8 指定了正确的文件路径.

让我们暂停一下，回顾一下我们刚刚编写的代码。在类 project-1 和 project-8 的规则集中，您添加了背景图像，指定了它的文件路径位置，并声明背景图像应该适合“覆盖”整个元素。

在 project-2 到 project-7 的规则集中，您使用 HTML 颜色代码指定了不同的背景颜色。请注意，您已将 project-7 的背景颜色设置为透明作为设计选择，但您可以根据需要进行更改。您还可以通过试验它们的值来探索每个类的不同背景图像和颜色。

接下来，您将添加一个规则集，以更改将添加到这些项目框中的文本的字体大小和位置。将以下规则集添加到 styles.css 文件的底部：

样式.css

. . .
.project-text {
  text-align:center;
  font-size:50px;
}

保存您的 styles.css 文件。现在，您将 <div> 容器添加到 HTML 文档，并使用您刚刚定义的 CSS 类设置它们的样式。返回到 index.html 文件并在此行下方添加以下代码片段： <h2 class="section-heading">Projects</h2>：

索引.html

. . .
<div class="column-4 project-1">
</div>

<div class="column-4 project-2">
  <h2 class="project-text">WEB <br>DESIGN</h2>
</div>

<div class="column-4 project-3">
  <h2 class="project-text">CHAT <br>BOTS</h2>
</div>

<div class="column-4 project-4">
  <h2 class="project-text">GAME <br> DESIGN</h2>
</div>

<div class="column-4 project-5">
  <h2 class="project-text">TEXT <br> ANALYSIS</h2>
</div>

<div class="column-4 project-6">
  <h2 class="project-text">JAVA <br> SCRIPT</h2>
</div>

<div class="column-4 project-7">
  <h2 class="project-text">DATA <br> PRIVACY</h2>
</div>

<div class="column-4 project-8">
</div>

保存您的 index.html 文件并在浏览器中重新加载它。您应该收到如下图所示的输出：

您应该有两行四个框，每个框的样式都根据为它们分配了 class 属性的 column-4 和 project-x 类。在 HTML 代码中，您还添加了文本内容（例如“聊天机器人”）并将所有文本内容分配给类 project-text.

您还添加了 HTML 换行元素 (<br>) 以在每个框中的两个单词之间创建换行符。如果您希望个性化您的网站，请随时更改此文本或稍后更改。您还可以使用 HTML 超链接元素 <a> 将此文本链接到您为网站创建的新页面。您将在本教程系列的结尾更详细地探索此选项。

接下来，您将添加一个伪类，以在用户将光标悬停在框上时使框改变颜色。

通过用户交互更改内容颜色

如果您返回演示网站并将光标悬停在“项目”部分中的框上，您会注意到它们改变了颜色。这种颜色变化是通过将 hover 伪类添加到每个项目类来实现的。

您可能还记得，如果您遵循本系列前面的关于伪类的教程，伪类是通过将冒号和伪类名称附加到您尝试修改的类的名称来创建的. 要将 :hover 伪类添加到项目类中，请在 styles.css 文件的底部添加以下规则集：

样式.css

. . .

/* Hover classes for individual project boxes */

.project-2:hover {
  background-color:#FEDE00;
}

.project-3:hover {
   background-color: #FEDE00;
}

.project-4:hover {
   background-color: #FEDE00;
}

.project-5:hover {
   background-color: #FEDE00;
}

.project-6:hover {
   background-color: #FEDE00;
}

.project-7:hover {
   background-color: #FEDE00;
}

在此代码片段中，您为八个项目类中的六个创建了 hover 类。当用户将光标悬停在框上时，此 hover 类指示元素将其颜色更改为 HTML 颜色代码 #FEDE00。请注意，您只将悬停类添加到包含文本的项目框中（而不是添加到包含背景图像的项目框中）。

保存 styles.css 文件并在浏览器中重新加载 index.html。通过将光标悬停在项目框上来检查以确保 hover 伪类正在工作。当您的光标经过它们时，它们应该会改变颜色：

结论

您现在已经使用 CSS 类将 HTML 内容布局在框中，并添加了一个 hover 伪类以在用户光标悬停在它们上方时更改它们的外观。您可以通过更改这些类中的样式声明或更改用于组织页面布局的框的大小和数量来继续试验这些方法。

在下一个教程中，您将使用 HTML 表格将“就业”部分添加到网站。