【前端WEB】3、使用HTML+CSS+JS实现网页正文整体布局（原创含源码）

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

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

---

---

前言

HTML部分 - 展示和解释HTML结构。
CSS部分 - 展示如何使用CSS来美化布局。
JavaScript部分 - 解释如何使用JavaScript增强用户体验。

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

---

一、整体布局是什么？

这种导航方式特别适合于内容丰富的网站，如在线教育平台、博客网站或企业网站。

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

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

二、使用步骤

1.HTML结构

代码如下（示例）：放置在HTML文件夹里，可以自行增加项。
代码解释：class引用css样式、onclick点击事件通过JS完成。

  <!-- 主要内容区域 -->
    <div class="container">
        <section id="box1">首页</section>
        <section id="box2">导航2</section>
        <section id="box2">导航3</section>
        <section id="box2">导航4</section>
        <!-- 更多内容区 -->
    </div>

2.CSS样式

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

.contener {
	background-color: #fff;
	margin: 20px 0;
	padding: 15px;
	border-radius: 4px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
/* 调整段落样式 */
.container p {
	line-height: 1.6;
	color: #333;
}

/* 大屏幕（例如桌面显示器） */
@media (min-width: 1024px) {
	.container {
	max-width: 800px;
	}
}

/* 中等屏幕（例如平板） */
@media (min-width: 768px) and (max-width: 1023px) {
	.container {
		max-width: 600px;
	}
}

/* 小屏幕（例如手机） */
@media (max-width: 767px) {
	.container {
		 max-width: 100%;
	}
}

该处使用的url网络请求的数据。

2.JavaScript代码

代码如下（示例）：
let sections = [‘box1’, ‘box2’, ‘box3’, ‘box4’]
其中内部为HTML表单中的点击事件所绑定的ID：οnclick="scrollToSection(‘box1’)
这里的JS代码与前两文一致，盒子注意本文中HTML板块id的绑定！！！此处JS用于跳转。

// 点击跳转
function scrollToSection(sectionId) {
	document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
}

window.onscroll = function () {
	let sections = ['box1', 'box2', 'box3', 'box4'];
	sections.forEach(section => {
		let element = document.getElementById(section);
		let position = element.getBoundingClientRect();
		if (position.top <= 150 && position.bottom >= 150) {
			document.querySelectorAll('.side-nav-item').forEach(div => {
				div.classList.remove('active');
			});
			document.querySelector(`.side-nav-item[onclick="scrollToSection('${section}')"]`).classList.add('active');
		}
	});
};

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了HTML前端页面的正文模块的创建，而CSS提供了具体的样式，可以自己进行调节，JS实现了当用户点击侧边按钮即跳转 ，JS与上文保持一致，ID的绑定与本文HTML模块一致！！！
如需其他示例或有问题欢迎评论！！本人看到都会回复。