介绍

在CSS系列的最终教程中,您将创建一个静态脚印,在观看端的底部保持固定位置,当访问者滚向页面。

前提条件

要遵循本教程,请确保您已设置必要的文件和文件夹,如本系列中以前的教程中指示的那样 How To Set Up You CSS and HTML Practice Project。

本教程使用几个社交媒体图标作为脚下内容. 如果你想使用这些图标,现在从我们的演示网站下载,并将其保存到你的图像文件夹为:

• "twitter.jpeg"
• "github.jpeg"
• "email.jpeg."

要下载这些图像,请单击上面的链接文件名,然后单击CTRL + 左单击 (在 Mac 上) 或右单击 (在 Windows 上),同时浮动在图像上,然后选择保存图像作为。

一旦你已经保存了你的图标,你可以继续到下一节。

添加一个类来风格你的脚

首先,您将通过将以下代码片段添加到 styles.css 文件的底部来定义一个 "footer" 类:

 1[label styles.css]
 2. . .
 3
 4/* Footer */
 5
 6.footer {
 7  position:fixed;
 8  bottom:0;
 9  left:0;
10  width:100%;
11  height: 90px;
12  background-color: #D0DAEE;
13}

保存 styles.css 文件。 在此代码片段中, 您为 Footer 区域添加了 CSS 代码标签 。 然后,你界定了一个叫 " foter " 的班级,并宣布了几种风格规则。 第一个规则宣布其位置'为固定的',这意味着该元素不会从用户滚动下页时指定的位置移动。 此位置由下两个声明所指定: " 从下到下:0 " 和 " 从左到上:0 " ,它们指定了浏览器的取景口位置为零像素_从左到下:从零像素_从浏览器的取景口.

通过更改这些值,您可以更改页面上元素的位置. 但是,请注意,除零之外的任何值都需要包含数字之后的px字符串。

您现在已经准备好在本教程的下一节中添加脚印内容。

添加与你的脚阶层时尚的脚

要添加脚印内容,您将添加一个<div>容器到网页,并分配您刚刚创建的脚印类别。 返回您的index.html文件并在最后关闭的</div>标签结束后粘贴下面的代码片段:

1[label index.html]
2. . .
3
4<!--Section 7: Footer-->
5
6<div class="footer">
7</div>

保存您的 index.html 文件,并在浏览器中重新加载它(有关下载 HTML 文件的说明,请访问我们的教程步骤 如何在浏览器中查看离线 HTML 文件)。

接下来,您将添加内容到新创建的脚印。

如何添加和风格菜单项目到你的脚

在此步骤中,您将添加和格式化菜单项目到脚印的左侧。 这些菜单项目可以用来链接到您的网站上的其他页面。 目前,您的网站只有一个网页,所以您可以使用我们提供的示范目的的链接。 后来,如果您添加额外的页面到您的网站,您可以在这里创建菜单项目并添加正确的链接。 您可以学习如何创建和链接到新的网页,通过本教程在 如何使用HTML构建网站)。

返回你的 styles.css 文件,并在文件底部添加以下代码片段:

 1[label styles.css]
 2. . .
 3
 4.footer-text-left {
 5  font-size:25px;
 6  padding-left:40px;
 7  float:left;
 8  word-spacing:20px;
 9}
10
11a.menu:hover {
12  background-color:yellow;
13  font-size:20px;
14}

让我们暂停一下,审查我们创建的每个规则集:

• 联合国 第一个规则集定义了一个名为 " fower-text-left " 的类,用于样式菜单项文本。 请注意,您正在将浮动属性设置为左字,以便分配给这一类的文本将浮出页左边。 您还正在使用 单词间隔 属性, 在菜单项目之间给予额外空间 。 如果您的菜单项目都不止一个字, 您需要为菜单项目的样式创建一个类( 而不是仅仅更改字间隔值 ) 。
• 联合国 第二个规则集使用"hover"伪类,当用户在文本上徘徊光标时,在文本中添加黄色背景颜色. .

现在你将添加菜单项目到网页. 返回你的 index.html 文件,并在你已经创建的脚印容器中添加以下突出的代码片段:

 1[label index.html]
 2. . .
 3
 4<div class="footer">
 5  <p class="footer-text-left">
 6    <a href="index.html" class="menu">home</a>
 7    <a href="https://css.sammy-codes.com/about.html" class="menu">about</a> 
 8    <a href="https://css.sammy-codes.com/credits.html" class="menu">credits</a>
 9  </p>
10</div>

此代码片段添加两个菜单项目(关于和信贷),链接这些菜单项目,并用您刚刚创建的脚本文本左和a.menu类来格式化文本。

保存这两个文件,并在浏览器中重新加载您的网页. 您应该收到这样的东西:

添加社交媒体图标

接下来,你会将社交图标添加到脚下,你可以使用它们链接到你的社交媒体帐户. 如果你想为不同的社交媒体平台使用图标,你可以在网上搜索免费图标,然后将它们下载到你的图片文件夹。 返回你的styles.css文件,并将以下三套规则添加到你的文件底部:

 1[label styles.css]
 2. . .
 3
 4.footer-content-right {
 5  padding-right:40px;
 6  margin-top:20px;
 7  float:right;
 8}
 9
10.icon-style {
11  height:40px;
12  margin-left:20px;
13  margin-top:5px;
14}
15
16.icon-style:hover {
17  background-color:yellow;
18  padding:5px;
19}

让我们停下来审查每个规则:

• 第一套规则定义了脚下内容右类,并将其分配给特定的垫子、边缘和浮动值。 您将使用此套规则来格式化一个<div>元素,该元素将包含社交媒体图标。 * 第二套规则创建了图标风格类,该类将为社交媒体图标的大小和位置提供高度和边缘值。

保存你的 tyles.css 文件. 你现在将添加社交媒体图标到脚下. 返回你的 index.html 文件,并在最后关闭菜单项目的 </a> 标签后添加以下代码片段:

1[label index.html]
2. . .
3
4...
5<div class="footer-content-right">
6  <a href="https://github.com/digitalocean"><img src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/images/github.jpeg" class="icon-style" alt="Github icon"></a>
7  <a href="https://www.twitter.com/DigitalOcean"><img src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/images/twitter.jpeg" class="icon-style" alt="Twitter icon"></a>
8  <a href="https://www.twitter.com"><img src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/images/email.jpeg" class="icon-style" alt="Emailicon"></a>
9</div>

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

此代码片段创建一个<div>容器,该容器被分配到类的footer-content-right风格中。

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

保存您的index.html文件,并在浏览器中重新加载。您现在应该有一个固定脚印,右边有三个社交媒体图标,链接到您的帐户。 链接应该改变颜色,当用户在它们上方弯曲其方针。 为了确认您的结果,您可以将其与本教程开始时的GIF进行比较。

结论

现在您已经创建了一个静态的页脚,在访问者向下滚动时,该页脚将固定位置留在取景口下方. 您可以通过改变您创建的 CSS 类中的值来继续探索页脚设计和内容可能性,或者在您的 index.html 文件上添加不同类型的内容。 对于探索您网站的设计和布局可能性的更多想法,[本教程系列的结 (https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-css# conclusion)对尝试诸如重排内容章节,添加链接到其他页面,以及使用框模型来改变布局样式的事物有更多的建议.