在网页制作中，经常需要在网站的每个页面底部添加一些通用的信息，比如版权信息、联系方式等等。手动在每个页面中添加这些信息是很繁琐的，因此使用CSS技术可以轻松实现在每个.html页面的末尾添加一个地址。
1. 创建.css文件
首先，创建一个新的CSS文件，以便在其中添加样式信息，这些样式信息将应用于网站的每个页面。
/* 底部地址CSS */
.bottom-address {
background-color: #f8f8f8;
color: #adadad;
text-align: center;
padding: 10px;
}
2. 在.html文件中引入CSS文件
然后，在网站的每个HTML文件中，通过添加以下代码片段引用CSS文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站标题</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--网页内容-->
<div class="bottom-address">
网站地址：www.example.com
</div>
</body>
</html>
3. 实测
在每个HTML页面的body标签中添加一个包含底部地址的div元素，然后将CSS类(bottom-address)应用于该元素。在这个div元素中添加一个段落，用于显示网站地址。
示例图片
使用"<footer>"标签来添加底部信息
除了上述方法外，另一种常见的添加底部信息的方法是使用HTML footElement元素或"<footer>"标签，这个标签表示整个文档或其某个部分（节）的脚注或者页脚，其通常会包含版权、作者等信息。这个标签应该添加在HTML文档的底部，作为主内容区之后的一个独立块。
在标记模式下，您可以使用以下代码将"<footer>"标签添加到您的HTML文档中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站标题</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--网页内容-->
<footer>
版权所有 ? 2021 example.com. 保留所有权利
联系邮箱：hello@example.com
</footer>
</body>
</html>
上述HTML代码片段添加了一个脚注标签（"footer"元素）。在这个元素中添加了两个段落，包含版权信息和联系方式等信息。
然后，通过CSS来对这个标签进行样式化，最终效果如下：
footer {
background-color: #f8f8f8;
color: #adadad;
text-align: center;
padding: 10px;
}
上述代码使用CSS的属性设置脚注的背景颜色、前景颜色、文本对齐方式以及内边距值等。
示例图片