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

2023-12-27 05:08:14

【前端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提供了具体的样式,可以自己进行调节。
新人投稿感谢关注与支持!如需其他示例或有问题欢迎评论!!本人看到都会回复。

文章来源:https://blog.csdn.net/weixin_52938153/article/details/135233432
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。