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