如何在HTML网页中添加页脚

来源 :网页制作公司发表时间 : 2025-01-17 16:15:21

在HTML网页中添加页脚（footer）非常简单，你只需要在HTML文档的底部使用<footer>标签即可。这个标签通常用于包含如版权信息、公司标识、联系方式、社交媒体链接等页面底部的信息。

以下是一个基本的例子，展示了如何在HTML网页中添加页脚：

html复制代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>添加页脚示例</title>

<style>

/* 简单的CSS样式来美化页脚 */

footer {

background-color: #333; /* 页脚背景色 */

color: #fff; /* 页脚文本颜色 */

text-align: center; /* 文本居中 */

padding: 20px; /* 页脚内边距 */

position: fixed; /* 固定定位，使页脚始终在底部 */

bottom: 0; /* 距离视口底部0px */

width: 100%; /* 页脚宽度100% */

}



/* 可选：确保页面主体内容不被页脚遮挡 */

body {

margin-bottom: 60px; /* 根据页脚高度调整 */

}

</style>

</head>

<body>

<!-- 网页的其他内容 -->

<header>

<h1>我的网站标题</h1>

</header>

<main>

<p>这里是网页的主要内容区域。</p>

<!-- ...更多内容... -->

</main>



<!-- 页脚 -->

<footer>

<p>© 2023 我的公司名称。保留所有权利。</p>

<p>联系我们: <a href="mailto:.com" style="color:#fff;">info@example.com</a></p>

<p>关注我们:

<a href="https://.com/example" target="_blank" style="color:#fff; margin-right:10px;"></a>

<a href="https://.com/people/example/" target="_blank" style="color:#fff;"></a>

</p>

</footer>

</body>

</html>

在这个例子中，<footer>标签被放置在<body>标签的底部，紧接在</main>标签之后。页脚内部包含了一些简单的文本和链接，以及用于美化页脚的CSS样式。

请注意，在CSS样式中，我使用了position: fixed;来将页脚固定在视口的底部。这意味着无论页面内容有多少，页脚都会始终显示在页面的最下方。同时，我也为<body>标签添加了margin-bottom属性，以确保页面主体内容不会被页脚遮挡。你需要根据页脚的实际高度来调整margin-bottom的值。

如果你不希望页脚固定，而是希望它随着页面内容的滚动而移动，你可以移除position: fixed;和bottom: 0;属性，并相应地调整其他样式。这样，页脚就会自然地出现在页面内容的底部，当用户滚动页面时，页脚也会一起移动。

上一篇 : html网页最底部怎么做下一篇：没有了

头条文章

如何在HTML中添加图片
在HTML中添加图片非常简单，你只需要使用<img&g...
技术类型网站应该怎样做网站内容
一个网站的内容对网站的运营非常重要，因为网站的内容是一个网站...
如何在HTML中添加视频
在HTML中添加视频，你可以使用<video>标...
这些搜索设计有利于网站建设你知道吗
一般用户进入一个网站都是带有目的性的，他们希望能尽快找到自己...

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>添加页脚示例</title>
	<style>
	/* 简单的CSS样式来美化页脚 */
	footer {
	background-color: #333; /* 页脚背景色 */
	color: #fff; /* 页脚文本颜色 */
	text-align: center; /* 文本居中 */
	padding: 20px; /* 页脚内边距 */
	position: fixed; /* 固定定位，使页脚始终在底部 */
	bottom: 0; /* 距离视口底部0px */
	width: 100%; /* 页脚宽度100% */
	}

	/* 可选：确保页面主体内容不被页脚遮挡 */
	body {
	margin-bottom: 60px; /* 根据页脚高度调整 */
	}
	</style>
	</head>
	<body>
	<!-- 网页的其他内容 -->
	<header>
	<h1>我的网站标题</h1>
	</header>
	<main>
	<p>这里是网页的主要内容区域。</p>
	<!-- ...更多内容... -->
	</main>

	<!-- 页脚 -->
	<footer>
	<p>© 2023 我的公司名称。保留所有权利。</p>
	<p>联系我们: <a href="mailto:.com" style="color:#fff;">info@example.com</a></p>
	<p>关注我们:
	<a href="https://.com/example" target="_blank" style="color:#fff; margin-right:10px;"></a>
	<a href="https://.com/people/example/" target="_blank" style="color:#fff;"></a>
	</p>
	</footer>
	</body>
	</html>