如何使用 HTML 向您的网页添加页脚


该系列的一部分:
如何使用 HTML 构建网站

本教程系列将指导您使用 HTML(用于在 Web 浏览器中显示文档的标准标记语言)创建和进一步自定义该网站不需要有任何编码经验,但如果您想重新创建演示网站,我们建议您从本系列开头开始

在本系列结束时,您应该有一个准备好部署到云的网站,并且基本熟悉 HTML。了解如何编写 HTML 将为学习其他前端 Web 开发技能(例如 CSS 和 JavaScript)奠定坚实的基础。

网站页脚是网页底部的最后一块内容。页脚可以包含任何类型的 HTML 内容,包括文本、图像和链接。在本系列的最后一个教程中,我们将使用<footer>元素为我们的网页创建以下基本页脚

页脚

首先,在结束</div>标记之后和结束标记之前粘贴以下代码片段</body>

. . .
<!--Footer--> 
<footer style="height:auto; background-color:#F7C201;">
  <h1><Made with 🤍 at DigitalOcean</h1>
</footer>
. . .

在这个片段中,<!--Footer-->是一个不会被浏览器读取的注释,用于帮助组织我们的html文件,以提高人类可读性。在这个注释下面,我们

添加了一个
<footer>元素,指定了它的背景颜色,并使用了 style 属性设置了它的高度以自动调整到里面的内容。一个<footer>元素是一种语义的,它的名字告诉开发者的内容的目的元素。这对开发人员以及使用屏幕阅读器的网站访问者都有帮助。否则,<footer>元素就像一个<div>元素一样工作

我们还在<h1>元素中添加了文本内容和表情符号随意使用您选择的消息和表情符号更改此文本内容。

保存您的文件并在浏览器中重新加载它以检查结果。你应该会收到这样的信息:

无样式的页脚

请注意,我们的页脚内容与演示站点中的内容不太一样。我们的页脚内容有一个白色的底部边距,文本有不同的样式。要删除底部边距并设置文本样式,请将突出显示的属性添加到您的<h1>元素中,如下所示:

<h1 style="color:white; padding:40px; margin:0; text-align:center;">Made with 🤍 at DigitalOcean</h1>

保存文件并在浏览器中重新加载它。您现在应该有一个与本教程顶部所示的演示站点样式相同的页脚。

在本教程中,您学习了如何创建页脚并为其设置样式。您现在可以探索使用本教程系列中的元素向页脚添加不同类型的内容和样式。

觉得文章有用?

点个广告表达一下你的爱意吧 !😁