admin管理员组文章数量:1621465
【前端WEB】使用HTML+CSS+JS实现网页footer布局(原创含源码)
第一章 使用 HTML+CSS+JS 实现网页首页导航栏效果
第二章 使用 HTML+CSS+JS 实现网页侧边导航栏效果
第三章 使用 HTML+CSS+JS 实现网页正文整体布局
第四章 使用HTML+CSS+JS实现网页footer布局
第五章 使用HTML+CSS+JS实现网页“搜猪输入法”的制作(本文)
文章目录
- 【前端WEB】使用HTML+CSS+JS实现网页footer布局(原创含源码)
- 前言
- 一、项目结构
- 二、详细代码解释
- 1、HTML 结构
- 2、JavaScript 逻辑
- 三、效果演示
- 四、打开方式
前言
在初步了解前4小结的内容,让我们一起上手完成一个仿搜狗的“搜猪输入法”!🐖
代码部分:HTML主页、IMG、JS、CSS
作者:爪磕(本人)
tips:项目已上传Github 纯开源,诸位需要可直接二创改编,无水印无其他信息!爪爪只希望能给个赞!!!
Github-搜猪输入法源码
一、项目结构
本项目包括以下主要部分:
- HTML:构成网页的骨架
- IMG:网页中使用的所有图片资源。
- JS:提供网页的交互逻辑。
- CSS:定义网页的样式和布局。
目录结构:
二、详细代码解释
1、HTML 结构
本项目的 HTML 结构分为三个主要部分,每个部分占据屏幕的100%.
首页:
<div class="full-screen-box">
<header style="box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);">
<!-- 头部内容 -->
</header>
<!-- 主页轮播 -->
<div class="carousel-indicators">
<!-- 轮播指示器 -->
</div>
<!-- 七大下载盒子 -->
<div class="content-boxes">
</div>
</div>
第二页
<section class="industry-solutions">
<div class="solutions-title">为不同行业定制的多场景输入方案</div>
<nav class="solutions-nav">
<!-- 导航链接 -->
<a class="nav-link" data-target="office" href="#">智能办公</a>
<!-- 更多导航链接 -->
<!-- 内容盒子 -->
<div class="solutions-content">
<!-- 解决方案内容 -->
</div>
</nav>
<div style="padding: 20px; margin-top: 30vh;">
<div>
<h2>更多优秀案例</h2>
<!-- 案例内容 -->
</div>
</div>
</section>
第三页
<footer>
<!-- 页脚内容自行发挥 -->
</footer>
2、JavaScript 逻辑
第一部分:轮播图控制
- 功能说明:控制轮播图指示器的状态,以反映当前显示的幻灯片。
- 实现方法:changeSlide(slideNumber) 函数,根据传入的 slideNumber 参数激活相应的指示器。
// 轮播图
function changeSlide(slideNumber) {
const indicators = document.querySelectorAll('.carousel-indicator');
indicators.forEach((indicator, index) => {
indicator.classList.toggle('active', index === slideNumber);
});
}
document.addEventListener('DOMContentLoaded', () => {
changeSlide(0); // 页面加载时激活第一个指示器
document.querySelectorAll('.carousel-indicator').forEach((indicator, index) => {
indicator.addEventListener('click', () => {
changeSlide(index); // 点击指示器时切换幻灯片
});
});
});
第二部分:导航链接内容显示
- 功能说明:根据点击的导航链接显示相应的内容盒子,隐藏其他内容。
- 实现方法:在页面加载完成后,添加事件监听器,点击导航链接时切换激活状态。
document.addEventListener('DOMContentLoaded', function () {
var navLinks = document.querySelectorAll('.nav-link');
var contentPanes = document.querySelectorAll('.content-pane');
navLinks.forEach(function (link) {
link.addEventListener('click', function (event) {
event.preventDefault();
navLinks.forEach(lnk => lnk.classList.remove('active'));
contentPanes.forEach(pane => pane.classList.remove('active'));
this.classList.add('active');
var targetId = this.getAttribute('data-target');
var targetPane = document.getElementById(targetId);
if (targetPane) {
targetPane.classList.add('active');
}
});
});
// 页面加载时自动激活第一个导航链接
if (navLinks.length > 0) {
navLinks[0].click();
}
});
三、效果演示
四、打开方式
使用VsCode
、HBuild
等工具导入解压的包
点击HBuildindex.html
浏览器运行即可
到这里就完成啦!项目整合包我放在文件了,爪磕原创开源前端代码支持二创!
如果看到这点点关注,点个赞也好呀 谢谢!
版权声明:本文标题:【前端WEB】5、 使用HTML+CSS+JS实现网页“搜猪输入法”的制作,开源可二创(含源文件最终成品) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1728843742a1176341.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论