如何使用HTML和CSS创建静态页脚（第7节）
介绍
在 CSS 系列的最后一个教程中，您将创建一个静态页脚，当访问者向下滚动页面时，该页脚将保持在视口底部的固定位置。 本教程将在 演示网站 中重新创建页脚，但您也可以将这些方法用于其他网站项目。
先决条件
要学习本教程，请确保您已按照本系列 如何设置 CSS 和 HTML 练习项目 中的前一个教程中的说明设置了必要的文件和文件夹。
本教程使用几个社交媒体图标作为页脚中的内容。 如果您想使用这些图标，请立即从我们的演示站点下载它们并将它们保存到您的图像文件夹中：
- “twitter.jpeg”
- “github.jpeg”
- “email.jpeg。”
要下载这些图像，请单击上面链接的文件名，然后单击 CTRL + Left Click（在 Mac 上）或 Right Click（在 Windows 上），同时将鼠标悬停在图像上并选择“图像另存为”。 使用指示的文件名将图像保存到 images 文件夹。
保存图标后，您可以继续下一部分。
添加一个类来设置你的页脚样式
首先，您将通过将以下代码片段添加到 styles.css 文件的底部来定义一个“页脚”类：
样式.css
. . .
/* Footer */
.footer {
position:fixed;
bottom:0;
left:0;
width:100%;
height: 90px;
background-color: #D0DAEE;
}
保存 styles.css 文件。 在此代码片段中，您添加了注释来标记页脚部分的 CSS 代码。 然后，您定义了一个名为 footer 的类并声明了几个样式规则。 第一条规则将其 position 声明为 fixed,，这意味着当用户向下滚动页面时，元素不会从您指定的位置移动。 该位置由接下来的两个声明指定：bottom:0 和 left:0，它指定位置距左侧 零像素 和距底部 零像素 ] 浏览器的视口。
通过更改这些值，您可以更改页面上元素的位置。 但是请注意，除零以外的任何值都需要在数字后包含 px 后缀。 规则集还指定了 footer 类的宽度、高度和背景颜色。
您现在已准备好在本教程的下一部分中添加页脚内容。
添加与您的页脚类样式的页脚
要添加页脚内容，您将向网页添加一个 <div> 容器并分配您刚刚创建的页脚类。 返回到您的 index.html 文件并在最后一个结束 </div> 标记的末尾粘贴以下代码片段：
索引.html
. . . <!--Section 7: Footer--> <div class="footer"> </div>
保存您的 index.html 文件并在浏览器中重新加载它。 （有关加载 HTML 文件的说明，请访问我们的教程步骤 如何在浏览器中查看脱机 HTML 文件）。 现在，您的网页底部应该有一个空的页脚部分，当您向上和向下滚动页面时，它会保持原位：
接下来，您将向新创建的页脚添加内容。
如何将菜单项添加到页脚并设置样式
在此步骤中，您将在页脚左侧添加菜单项并为其设置样式。 这些菜单项可用于链接到您网站上的其他页面。 目前，您的网站上只有一个网页，因此您可以使用我们提供的链接进行演示。 稍后，如果您向网站添加其他页面，您可以在此处创建菜单项并添加正确的链接。 您可以通过本教程了解如何创建和链接到新网页 如何使用 HTML 构建网站。
返回到您的 styles.css 文件并将以下代码片段添加到文件底部：
样式.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 文件并在您已经创建的页脚容器中添加以下突出显示的代码片段：
索引.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 文件并将以下三个规则集添加到文件底部：
样式.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> 标记之后添加以下代码片段：
索引.html
. . . ... <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 文件中。 有关探索网站设计和布局可能性的更多想法，本教程系列的 结论 提供了更多关于尝试重新排列内容部分、添加到其他页面的链接以及使用框更改布局样式的建议模型。
