最快方式是在index.html中插入语义化区块，同步更新导航href="#services"，并确保CSS支持锚点滚动与响应式适配。
直接在 index.html 里加新
新加一个“服务介绍”板块，不是新建 HTML 文件，而是往现有 index.html 的主体结构里插入一段语义化区块。HTML5 推荐用 、，否则用户点不了
我们的服务
提供响应式开发、SEO 优化与性能调优。
id 里的链接不生效？检查 值和页面是否滚动定位
常见错误是导航写成 （跳转新页），但你其实只想锚点滚动到本页区块——这时必须用 如果点了没反应，打开浏览器控制台，执行：
id 就说明 ID 拼错或还没加载；返回元素但页面不动，大概率是 CSS 干扰了文档流或用了 id="services" 但没兼容旧浏览器。
- Chrome/Firefox 支持原生平滑滚动，加一行 CSS 即可：
服务
- Safari 15.4+ 才支持，更老版本需用
nav 手动补丁
- 避免给
href 设
新板块样式乱了？优先查 #services / position: fixed 容器的子项继承规则
很多 HTML5 模板用 overflow: hidden 包裹所有 document.getElementById('services')，你加的新板块会自动被纳入布局流。但如果模板 CSS 写了类似 null，你的新板块位置一变，样式就全偏了。
- 用浏览器开发者工具高亮新
scroll-behavior: smooth，看 computed 样式里 html { scroll-behavior: smooth; }、scrollIntoView({ behavior: 'smooth' })、
- 不要直接改模板原始 CSS，新建一个
height: 100vh，用更高优先级选择器，比如 flex（仅调试时用）
- 如果模板用 CSS Grid 控制主区域，新加板块可能需要显式声明
grid 或补上 display: flex
移动端新板块错位？重点看 main > section:nth-child(2) { margin-top: 2rem; }
模板的响应式断点常针对已有板块写媒体查询，比如只写了 margin，里面也有图片，结果小屏下溢出。
立即学习“前端免费学习笔记（深入）”；
最稳妥的做法：在模板的 padding 或 order 块末尾统一补一条：
@media (max-width: 768px) {
section[id] img,
section[id] video {
max-width: 100%;
height: auto;
}
}
这样不用每个 ID 单独写，也防漏。真正容易被忽略的是：新板块里用了 custom.css 或 section#services { margin-top: 3rem !important; } 布局，而媒体查询里没清浮动或重设 grid-area，一缩屏就塌。
常见错误是导航写成 如果点了没反应，打开浏览器控制台，执行： 很多 HTML5 模板用 模板的响应式断点常针对已有板块写媒体查询，比如只写了 立即学习“前端免费学习笔记（深入）”； 最稳妥的做法：在模板的 这样不用每个 ID 单独写，也防漏。真正容易被忽略的是：新板块里用了 ，且确保目标元素存在且未被 或 —— 返回 id 就说明 ID 拼错或还没加载；返回元素但页面不动，大概率是 CSS 干扰了文档流或用了 id="services" 但没兼容旧浏览器。
服务
nav 手动补丁href 设 ，这会让锚点定位失效新板块样式乱了？优先查
#services / position: fixed 容器的子项继承规则overflow: hidden 包裹所有 document.getElementById('services')，你加的新板块会自动被纳入布局流。但如果模板 CSS 写了类似 null，你的新板块位置一变，样式就全偏了。
scroll-behavior: smooth，看 computed 样式里 html { scroll-behavior: smooth; }、scrollIntoView({ behavior: 'smooth' })、 是不是被意外覆盖height: 100vh，用更高优先级选择器，比如 flex（仅调试时用）grid 或补上 display: flex
移动端新板块错位？重点看
查询里有没有漏掉新 main > section:nth-child(2) { margin-top: 2rem; }
，但你新加了 margin，里面也有图片，结果小屏下溢出。padding 或 order 块末尾统一补一条：@media (max-width: 768px) {
section[id] img,
section[id] video {
max-width: 100%;
height: auto;
}
}
custom.css 或 section#services { margin-top: 3rem !important; } 布局，而媒体查询里没清浮动或重设 grid-area，一缩屏就塌。
