配套示例 · EXAMPLE
成品小站长这样
学完前四章,你会做出一个什么样的网站?这里放了一个完整、可交互、离线可打开的示例个人主页——它只用一个 HTML 文件、零外部依赖就实现了响应式布局、深浅色切换和滚动动效。先看效果,再逐段拆解它是怎么写出来的。
① 实时预览
下面就是示例小站本身,可以在框里直接滚动、点菜单、切换深浅色、缩窄浏览器窗口看响应式效果。想全屏体验,点右上角"打开完整示例"。
如果你是把本教程用 file:// 直接双击打开在本地看,个别浏览器可能出于安全策略限制内嵌预览(iframe)——这时点"打开完整示例"在新标签页看即可,联网部署后内嵌预览会自动正常。
② 这个小站演示了哪些知识点
它不是凭空冒出来的,每一块都对应前四章讲过的东西:
③ HTML 骨架:页面是怎么搭起来的
抛开样式,这个页面的"结构"非常清爽——就是语义化标签把内容分区。理解了这个骨架,你就理解了 90% 的静态网页:
<header> <!-- 顶部导航:logo + 菜单 + 换肤按钮 -->
<main>
<div class="hero"> <!-- 首屏:大标题 + 头像 + 按钮 -->
<section id="about"> <!-- 关于我 + 技能标签 -->
<section id="work"> <!-- 作品卡片网格 -->
<section id="contact"> <!-- 联系方式 -->
</main>
<footer> <!-- 版权与年份 -->注意每个 <section> 都带了 id,导航里的 <a href="#work"> 就是靠它实现"点一下就跳到对应区块"的锚点跳转——这套机制和本教程左侧目录用的是同一个原理。
④ CSS:主题变量 + 响应式
换肤之所以简单,是因为所有颜色都写在一组 CSS 变量里,切换主题只是换了变量的值:
:root { --brand:#6366f1; --ink:#0f172a; --bg:#ffffff; } /* 浅色 */
[data-theme="dark"] { --ink:#e5e7eb; --bg:#0f172a; } /* 深色 */
body { background: var(--bg); color: var(--ink); } /* 全站引用变量 */JS 只要给 <html> 加上或去掉 data-theme="dark" 这个属性,整站配色就瞬间切换。响应式则靠一段媒体查询,在窄屏把多列改单列、把横向菜单收进汉堡按钮:
@media (max-width: 820px) {
.grid { grid-template-columns: 1fr; } /* 作品卡片:三列 → 一列 */
.hero { grid-template-columns: 1fr; text-align: center; }
.menu { position: fixed; transform: translateY(-140%); } /* 收成抽屉 */
.burger{ display: grid; } /* 露出汉堡按钮 */
}⑤ JavaScript:三处交互,都很短
这个页面的"活"的部分全靠十几行原生 JS,没有任何库。三段最值得学:
1)移动端菜单开合
burger.addEventListener('click', () => menu.classList.toggle('open'));
// 点菜单里的链接后自动收起抽屉
menu.addEventListener('click', e => { if (e.target.tagName==='A') menu.classList.remove('open'); });2)深浅色切换(并记住选择)
function setTheme(t){ document.documentElement.setAttribute('data-theme', t); }
themeBtn.addEventListener('click', () => {
const next = document.documentElement.getAttribute('data-theme')==='dark' ? 'light' : 'dark';
setTheme(next);
try { localStorage.setItem('demo-theme', next); } catch(e){} // 下次打开还是这个主题
});3)滚动淡入动效
给元素加一个初始隐藏的 .reveal 类,用 IntersectionObserver 在它进入视口时补上 .in 类,触发 CSS 过渡:
const io = new IntersectionObserver(es => {
es.forEach(en => { if (en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target); } });
}, { threshold: .15 });
document.querySelectorAll('.reveal').forEach(el => io.observe(el));你会发现,本教程页面本身也用了同样的技术:侧边目录高亮、回到顶部、代码复制按钮——原理一模一样。看懂这个示例,你就看懂了这套站。
⑥ 把它变成你自己的网站
这个示例最实用的地方,是你可以直接拿它当起点改造成自己的小站:
- 1
下载 / 复制这个文件
把
demo/index.html存成你自己的项目文件。一个文件就是一个完整的网站,先能在本地双击打开。 - 2
替换文字与配色
把"林小满"换成你的名字,改标题、简介、作品;想换主色,只改
:root里的--brand一个值,全站跟着变。 - 3
换成你的内容分区
不需要"作品"就删掉那个
<section>;要加"博客""相册"就复制一段 section 改改。结构是积木式的。 - 4