介绍

在 CSS 系列的最后一个教程中，您将创建一个静态页脚，当访问者向下滚动页面时，它会保持在视口底部的固定位置。本教程将在演示网站中重新创建页脚，但您也可以将这些方法用于其他网站项目。

先决条件

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

本教程使用多个社交媒体图标作为页脚中的内容。如果您想使用这些图标，请立即从我们的演示站点下载它们并将它们保存到您的图像文件夹中：

• “推特.jpeg ”
• “ github.jpeg ”
• “电子邮件.jpeg。”

要下载这些图像，请单击上面的链接文件名，然后在将鼠标悬停在图像上的同时单击CTRL + Left Click（在 Mac 上）或Right Click（在 Windows 上）并选择“将图像另存为”。将带有指示文件名的图像保存到您的images文件夹中。

保存图标后，您可以继续下一部分。

添加一个类来设置页脚的样式

首先，您将通过将以下代码片段添加到styles.css文件底部来定义“页脚”类：

. . .

/* Footer */

.footer {
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height: 90px;
  background-color: #D0DAEE;
}

保存styles.css文件。在此代码片段中，您添加了一条注释来标记页脚部分的 CSS 代码。然后您定义了一个名为的类footer并声明了几个样式规则。第一条规则声明它position为fixed,，这意味着当用户向下滚动页面时，元素不会从您指定的位置移动。此位置由接下来的两个声明指定：bottom:0and left:0，它指定距浏览器视口左侧零像素和底部零像素的位置。

通过更改这些值，您可以更改元素在页面上的位置。但是请注意，除零之外的任何值都需要px在数字后包含后缀。规则集还指定了类的宽度、高度和背景颜色footer。

您现在已准备好在本教程的下一部分中添加页脚内容。

添加使用页脚类样式的页脚

要添加页脚内容，您将向<div>网页添加一个容器并分配您刚刚创建的页脚类。返回到您的index.html文件并在最后一个结束</div>标记的末尾粘贴以下代码片段：

. . .

<!--Section 7: Footer-->

<div class="footer">
</div>

保存您的index.html文件并在浏览器中重新加载它。（有关加载 HTML 文件的说明，请访问我们的教程步骤如何在浏览器中查看脱机 HTML 文件）。

您现在应该在网页底部有一个空的页脚部分，当您上下滚动页面时，它会保持原位：

接下来，您将向新创建的页脚添加内容。

如何向页脚添加菜单项并为其设置样式

在此步骤中，您将在页脚左侧添加菜单项并为其设置样式。这些菜单项可用于链接到您网站上的其他页面。目前，您的网站上只有一个网页，因此您可以使用我们提供的链接进行演示。稍后，如果您向网站添加其他页面，您可以在此处创建菜单项并添加正确的链接。您可以通过有关如何使用 HTML 构建网站的教程了解如何创建和链接到新网页。

返回到您的styles.css文件并将以下代码段添加到文件底部：

. . .

.footer-text-left {
  font-size:25px;
  padding-left:40px;
  float:left;
  word-spacing:20px;
}

a.menu:hover {
  background-color:yellow;
  font-size:20px;
}

让我们暂停一下，回顾一下我们创建的每个规则集：

• 第一个规则集定义了一个名为的类footer-text-left，该类将用于设置菜单项文本的样式。请注意，您正在将该float属性设置为，left以便分配给此类的文本将浮动到页面的左侧。您还使用该word-spacing属性在菜单项之间授予额外的空间。如果您的任何菜单项超过一个单词，您将需要创建一个用于设置菜单项样式的类（而不是仅仅更改单词间距值）。

• hover当用户将光标悬停在文本上时，第二个规则集使用伪类为文本添加黄色背景色。

现在，您将向网页添加菜单项。返回到您的index.html文件并在您已经创建的页脚容器中添加以下突出显示的代码片段：

. . .

<div class="footer">
  <p class="footer-text-left">
    <a href="index.html" class="menu">home</a>
    <a href="https://css.sammy-codes.com/about.html" class="menu">about</a> 
    <a href="https://css.sammy-codes.com/credits.html" class="menu">credits</a>
  </p>
</div>

此代码片段添加了两个菜单项（“about”和“credits”），链接这些菜单项，并使用您刚刚创建的footer-text-left和a.menu类来设置文本样式。

保存这两个文件并在浏览器中重新加载您的网页。你应该会收到这样的信息：

添加社交媒体图标

接下来，您将社交图标添加到页脚，您可以使用它来链接到您的社交媒体帐户。如果您想使用不同社交媒体平台的图标，您可以在网络上搜索免费图标并将它们下载到您的images文件夹中。返回到您的styles.css文件并将以下三个规则集添加到您的文件底部：

. . .

.footer-content-right {
  padding-right:40px;
  margin-top:20px;
  float:right;
}

.icon-style {
  height:40px;
  margin-left:20px;
  margin-top:5px;
}

.icon-style:hover {
  background-color:yellow;
  padding:5px;
}

让我们停下来回顾一下每个规则集：

• 第一个规则集定义类footer-content-right并为其分配特定的填充、边距和浮点值。您将使用此规则集来设置<div>将包含社交媒体图标的元素的样式。

• 第二个规则集创建的类icon-style将为社交媒体图标的大小和位置提供高度和边距值。

• hover当用户将光标悬停在文本上时，第三个规则集使用伪类为图标添加黄色背景。

保存您的styles.css文件。您现在将社交媒体图标添加到页脚。返回到您的index.html文件并</a>在菜单项的最后一个结束标记之后添加以下代码片段：

. . .

...
<div class="footer-content-right">
  <a href="https://github.com/digitalocean"><img src="images/github.jpeg" class="icon-style" alt="Github icon"></a>
  <a href="https://www.twitter.com/DigitalOcean"><img src="images/twitter.jpeg" class="icon-style" alt="Twitter icon"></a>
  <a href="https://www.twitter.com"><img src="images/email.jpeg" class="icon-style" alt="Emailicon"></a>
</div>

确保您使用自己的社交媒体信息更改文件路径和链接。

此代码段创建了一个<div>容器，该容器被分配footer-content-right了类的样式。在此div容器中，您使用 HTML<img>标记添加了三个社交媒体图标，并使用 HTML标记链接每个图像<a>。

您还添加了使用该alt属性描述每个图标的替代文本。创建网站时，应向所有图像添加替代文本，以支持使用屏幕阅读器的个人访问网站。要阅读有关在 HTML 中使用替代文本的更多信息，请访问我们的指南如何使用 HTML 将图像添加到您的网页中的替代文本部分。

保存您的index.html文件并在浏览器中重新加载它。您现在应该有一个固定的页脚，右侧带有三个链接到您帐户的社交媒体图标。当用户将光标悬停在链接上时，链接应该改变颜色。要确认您的结果，您可以将它们与本教程开头的 gif 进行比较。

结论

您现在已经创建了一个静态页脚，当访问者向下滚动页面时，它会停留在视口底部的固定位置。您可以通过更改您创建的 CSS 类中的值来继续探索页脚设计和内容的可能性，或者将不同类型的内容添加到您的index.html文件中。有关探索网站设计和布局可能性的更多想法，本教程系列的结论提供了更多尝试的建议，例如重新排列内容部分、添加到其他页面的链接以及使用框模型更改布局样式。