第一章 使用 HTML+CSS+JS 实现网页首页导航栏效果
第二章 使用 HTML+CSS+JS 实现网页侧边导航栏效果
第三章 使用 HTML+CSS+JS 实现网页正文整体布局
第四章 使用HTML+CSS+JS实现网页footer布局(本文)
在HTML(HyperText Markup Language,超文本标记语言)中,footer 元素通常用来定义页面或页面内容区块的底部部分。它是HTML5中引入的语义元素之一,用于增强文档的结构和可读性。
新人投稿!感谢大家的支持与点赞!此投稿为长期续更 以完成前端页面整体功能!
脚注主要位于网页的底部,用于写网站的版权?信息、联系等......
footer 元素的作用包括:
语义化标记:通过使用 footer 标签,开发者可以向浏览器、搜索引擎以及辅助技术等表明该部分内容是页面的页脚部分。这有助于搜索引擎更好地理解页面内容的结构,也便于屏幕阅读器为视障用户提供更准确的导航。
内容分组:footer 通常包含版权信息、联系方式、链接到隐私政策、使用条款、站点地图或者作者信息等。它可以存在于页面的最底部,也可以用于文章、章节或其他内容块的底部,为这些内容提供一个逻辑上的“结尾”。
增强用户体验:页脚可以包含导航元素,比如链接到页面的主要部分或者其他资源,这样用户在浏览页面底部内容后,可以方便地跳转到其他页面或网站部分。
布局和样式:在前端开发中,footer 元素也常用于布局目的,配合CSS(Cascading Style Sheets,层叠样式表)可以为页脚定义样式和布局,如背景颜色、字体样式、对齐方式等,以实现美观和一致性。
其效果的实现通常由HTML表单、CSS样式控制、JavaScript点击事件 组成。
footer脚注效果图如上所示,本文将提供上述图片效果的教程与源码,新人投稿欢迎大家的支持与点赞!!如有问题或需要帮助请欢迎您的指出!
代码如下(示例):放置在HTML文件夹里,可以自行增加项。
代码解释:class引用css样式
<footer>
© 2023 xxx。版权所有。
</footer>
代码如下(示例):
封装两个盒子,父盒子定位屏幕位置自适应、小盒子封装各个子项。
使用方法:放置在head里style标签,或者引入css文件。
footer {
background: #35424a;
color: white;
text-align: center;
padding: 10px 0;
}
代码如下(示例):放置在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>
代码如下(示例):
封装两个盒子,父盒子定位屏幕位置自适应、小盒子封装各个子项。
使用方法:放置在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提供了具体的样式,可以自己进行调节。
新人投稿感谢关注与支持!如需其他示例或有问题欢迎评论!!本人看到都会回复。