【前端WEB】4、 使用HTML+CSS+JS实现网页footer布局基础与升级（原创含源码）

【前端WEB】使用HTML+CSS+JS实现网页footer布局（原创含源码）

第一章 使用 HTML+CSS+JS 实现网页首页导航栏效果
第二章 使用 HTML+CSS+JS 实现网页侧边导航栏效果
第三章 使用 HTML+CSS+JS 实现网页正文整体布局
第四章 使用HTML+CSS+JS实现网页footer布局（本文）

---

---

前言

在HTML（HyperText Markup Language，超文本标记语言）中，footer 元素通常用来定义页面或页面内容区块的底部部分。它是HTML5中引入的语义元素之一，用于增强文档的结构和可读性。

新人投稿！感谢大家的支持与点赞！此投稿为长期续更 以完成前端页面整体功能！

---

一、Footer是什么？

脚注主要位于网页的底部，用于写网站的版权©信息、联系等......

footer 元素的作用包括：

语义化标记：通过使用 footer 标签，开发者可以向浏览器、搜索引擎以及辅助技术等表明该部分内容是页面的页脚部分。这有助于搜索引擎更好地理解页面内容的结构，也便于屏幕阅读器为视障用户提供更准确的导航。

内容分组：footer 通常包含版权信息、联系方式、链接到隐私政策、使用条款、站点地图或者作者信息等。它可以存在于页面的最底部，也可以用于文章、章节或其他内容块的底部，为这些内容提供一个逻辑上的“结尾”。

增强用户体验：页脚可以包含导航元素，比如链接到页面的主要部分或者其他资源，这样用户在浏览页面底部内容后，可以方便地跳转到其他页面或网站部分。

布局和样式：在前端开发中，footer 元素也常用于布局目的，配合CSS（Cascading Style Sheets，层叠样式表）可以为页脚定义样式和布局，如背景颜色、字体样式、对齐方式等，以实现美观和一致性。

其效果的实现通常由HTML表单、CSS样式控制、JavaScript点击事件 组成。

footer脚注效果图如上所示，本文将提供上述图片效果的教程与源码，新人投稿欢迎大家的支持与点赞！！如有问题或需要帮助请欢迎您的指出！

二、使用步骤

1.HTML结构

代码如下（示例）：放置在HTML文件夹里，可以自行增加项。
代码解释：class引用css样式

<footer>
	&copy; 2023 xxx。版权所有。
</footer>

2.CSS样式

代码如下（示例）：
封装两个盒子，父盒子定位屏幕位置自适应、小盒子封装各个子项。
使用方法：放置在head里style标签，或者引入css文件。

footer {
	background: #35424a;
	color: white;
	text-align: center;
	padding: 10px 0;
}

---

---

三、什么？太简单了？升级版来了！类似于某输入法的脚注效果👇

1.升级版.HTML结构

代码如下（示例）：放置在HTML文件夹里，可以自行增加项。
代码解释：class引用css样式

<!-- footer -->
<footer class="footer-container">
	<div style=" display: flex;
		justify-content: space-around;
		align-items: center;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 15px;">

		<div class="footer-box">
			<img src="img/logo1.png" alt="Logo 1" style="height: 10vh;width: auto;">
			<p>联系我们</p>
		</div>

		<div class="footer-box">
			<!-- <img src="logo2.png" alt="Logo 2"  style="height: 10vh;width: auto;"> -->
			<p>问题反馈&建议</p>
			<p>邮箱地址: 123@123.com</p>
		</div>

		<div class="footer-box">
			<!-- <img src="logo3.png" alt="Logo 3"  style="height: 10vh;width: auto;"> -->
			<p>更多信息</p>
		</div>

		<div class="footer-box">
			<img src="img/qr-code.png" alt="QR Code" style="height: 10vh;width: auto;">
			<p>扫一扫</p>
		</div>
	</div>
</footer>

2.升级版CSS样式

代码如下（示例）：
封装两个盒子，父盒子定位屏幕位置自适应、小盒子封装各个子项。
使用方法：放置在head里style标签，或者引入css文件。
盒子分为左中右排布，分别为“联系我们” “反馈” “更多信息” “扫一扫”

注意：图片路径为目录下的img文件夹，图片名字与格式填写为自己的。

.footer {
        width: 100%;
        background-color: #f2f2f2;
        border-top: 1px solid #ddd;
        padding: 20px 0;
        box-sizing: border-box;
    }

    .footer-container {
        display: flex;
        justify-content: space-around;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 15px;
    }

    .footer-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        padding: 0 10px;
    }

    .footer-box img {
        max-width: 100%;
        height: auto;
    }

    .footer-box p {
        margin: 5px 0;
        color: #333;
        text-align: center;
    } 

---

总结

本文介绍了HTML前端页面的foot的整体布局，而CSS提供了具体的样式，可以自己进行调节。
新人投稿感谢关注与支持！如需其他示例或有问题欢迎评论！！本人看到都会回复。