简介以HTML5和CSS3为核心构建的个人博客网站完整工程源码适合前端初学者、网页设计课程作业参考者及需要快速搭建个人博客的开发者。项目覆盖响应式布局、语义化标签、CSS3动画过渡和交互脚本等常见知识点可直接运行并支持二次修改。压缩包共324个文件大小约16.03MB。其中33个html页面构成博客主体结构25个css样式文件包含全局样式及Bootstrap相关样式23个js脚本负责交互与数据请求126张jpg与68张png等图片素材用于文章配图与界面展示另附字体、图标和少量PHP文件整体目录清晰便于按模块查找。目前已有335人学习下载。项目融合了HTML5离线存储、语义化标签与CSS3媒体查询、弹性布局等特性并引入Bootstrap辅助响应式设计对理解移动端适配、页面模块划分和静态资源组织方式都有直接参考价值。跟随源码梳理一遍样式与脚本实现能较快掌握从页面骨架搭建到视觉呈现的完整设计思路适合作为个人博客开发的起步样板。1. 为什么一份作业型HTML5博客源码值得拆开看前端这个圈子里能默写 flex 布局的人很多能独立把一个博客从零搭到上线的人比例没那么高。这个基于 HTML5CSS3 的个人博客网站设计与实现源码包从文件名就能看出是典型的作业型项目压缩包里有bootstrap.min.css和bootstrap.css目录名还留着YxwBlog-master的痕迹。别因为它带着“设计与实现”几个字就觉得低一档拆开看它把 HTML5 语义化结构、CSS3 动画参数、响应式断点、离线缓存这几样现代前端的看家功夫都过了一遍。新手可以拿它当练手模板熟手也能从动效延迟、填充模式这类细节里找回一点写项目的直觉。2. 从YxwBlog-master看目录骨架与HTML5语义化布局拿到压缩包先别急着双击 index.html。先看文件结构这类源码通常解压后能看到index.html、css/、js/、img/而压缩包里同时出现bootstrap.css和bootstrap.min.css说明项目实际引入了 Bootstrap。这两个文件的区别值得多说一句.min.css是压缩版去掉了换行和注释体积小、加载快而bootstrap.css保留了可读格式是在浏览器里定位样式问题时用的。我一般的习惯是开发期引用原版发布前全部切到.min版本。2.1 语义化标签博客的骨架不只是div早期博客模板满屏都是div idheader、div classcontent这类结构对浏览器和搜索引擎都不够友好。HTML5 引入的header、nav、main、article、section、aside、footer这组语义化标签把页面的区域职责直接写进标签名里导航就是nav正文就是article侧栏就是aside。对博客来说article的价值最大。搜索引擎在提取页面正文时看到article会比看到一串嵌套div更快锁定核心内容屏幕阅读器也可以让视障用户直接跳转到文章主体而不是从头朗读一遍导航菜单。这是纯用div布局很难做到的。骨架代码通常长这样body header classsite-header nav aria-label主导航 a href/首页/a a href/archive.html归档/a a href/about.html关于/a /nav /header main classcontainer section classrow article classcol-md-8 col-lg-8 h1HTML5 语义化标签到底改变了什么/h1 p文章内容……/p /article aside classcol-md-4 col-lg-4 h2作者信息/h2 p这里放头像和标签云/p /aside /section /main footer classsite-footer p© 2024 个人博客/p /footer /body这段结构里每层都有明确职责main告诉浏览器页面的主体内容在哪一块section classrow是 Bootstrap 的栅格行article和aside在里面做左右分栏。aria-label是给读屏器用的可访问性标记对只有一个nav的页面不是必须的但如果有多个nav就需要用它区分“主导航”和“页脚导航”。2.2 栅格系统三行代码搭出页面骨架这个项目引入 Bootstrap 的核心原因就是它自带的栅格系统。栅格把页面宽度横向切成 12 列所有列的宽度总和不超过 12 就能排在同一行。col-md-8表示在中等屏幕一般是平板横屏及以上下占 8 列col-lg-4表示在大屏下占 4 列剩下 4 列分给侧栏。代码里同时写了col-md-8和col-lg-8这在 Bootstrap 里是允许的小屏默认单列中等屏按 8:4 分栏大屏继续保持这个比例。如果你想在大屏上让侧栏更窄可以写成col-md-8 col-lg-9。栅格外层的.container会按断点自动设置最大宽度比如 768px 断点以下是全宽以上逐级变成 720px、960px、1140px。这里有个容易忽略的点.container本身有padding如果页面背景要做全宽通栏要把它放到.container外面。3. 博客里的多媒体与CSS3动效怎么落地博客页面最容易显得死板问题通常出在两处一是没有多媒体元素二是动效只有 hover 变色。HTML5 在这两项上给了足够的原生能力不需要再依赖 Flash 或复杂的 jQuery 插件。3.1 用video标签做博客头图视频附倍速控制HTML5 的video标签把视频播放变成了浏览器的内置能力controls属性直接带出播放条poster指定视频加载前的封面图。写视频源时最好同时准备 MP4 和 WebM 两种格式因为不同浏览器对编码格式的支持不一样。写这样一段video idintroVideo controls preloadmetadata posterimg/poster.jpg source srcmedia/intro-720.mp4 typevideo/mp4 source srcmedia/intro-720.webm typevideo/webm 你的浏览器不支持 HTML5 video请升级浏览器。 /video div button>canvas idbgCanvas/canvas script const canvas document.querySelector(#bgCanvas); const ctx canvas.getContext(2d); canvas.width canvas.offsetWidth; canvas.height canvas.offsetHeight; function drawFrame(t) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle hsl(${t / 20 % 360}, 80%, 60%); ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, 30 Math.sin(t / 300) * 15, 0, Math.PI * 2); ctx.fill(); requestAnimationFrame(drawFrame); } requestAnimationFrame(drawFrame); /scriptgetContext(2d)拿到绘图上下文所有绘制指令都通过它发出clearRect每帧清空画布避免上一帧图形残留。requestAnimationFrame的帧率由浏览器根据屏幕刷新率决定比setInterval定时器更平滑也更省电。注意canvas.width和 CSS 宽度不是一回事设置 CSS 宽度只影响显示大小绘图分辨率由属性决定响应式布局里要记得用canvas.offsetWidth同步实际像素。3.3 CSS3动画延迟、执行次数与逆向播放的参数配合CSS3 动画真正难的不是写keyframes而是理解执行时序。很多课程会把“css3动画延迟和完成后状态的保持”单独拆成一节就是因为这两个参数组合起来很容易翻车。先看延迟animation-delay让动画等一段时间再执行但它只延迟动画的开始不保证动画结束后的状态。看这段代码.article-card { opacity: 0; transform: translateY(24px); animation: floatIn .6s ease-out forwards; animation-delay: .15s; } .article-card:nth-child(2) { animation-delay: .3s; } .article-card:nth-child(3) { animation-delay: .45s; } keyframes floatIn { to { opacity: 1; transform: translateY(0); } }forwards是完状态保持的关键动画结束后元素保留最后一帧的样式。如果不写动画播完元素会跳回初始状态opacity 回到 0卡片直接消失。这个属性值的作用范围只覆盖自身所以延迟阶段元素仍然保持opacity: 0的初值。这样三张卡片会从 0.15s 开始依次浮入形成轻微的阶梯感。再看执行次数与方向。animation-iteration-count控制播放几遍animation-direction控制方向两者配合能做出很多看似复杂的往复效果.switch-line { animation: pulse 1s ease-in-out 3 alternate; } keyframes pulse { from { background-color: #4a90d9; } to { background-color: #ff7f50; } }这里3 alternate的含义是正向播放 3 次每次结束后反向播放一次最终呈现 前→后→前 的交替效果。如果把alternate换成reverse动画会从to那一帧开始向from播放。参数之间的关系可以这样整理参数取值示例实际效果animation-delay.15s动画开始前等待 0.15 秒animation-fill-modeforwards结束后保留最后一帧样式animation-iteration-count3/infinite播放 3 次或无限循环animation-directionalternate奇数次正向偶数次反向animation-directionreverse从to帧向from帧播放需要提醒的是动画结束后的“保持”效果只在animation-fill-mode生效期间存在。一旦你把元素改成display: none再显示动画会重新执行这不是 bug而是初始化后的正常行为。4. 断点设计媒体查询与Flexbox/Grid的响应式配合个人博客的访问场景比企业站更杂有人用手机看有人用平板还有人在 2560px 宽的大屏上打开两个窗口。响应式不是“在不同尺寸里做三套页面”而是同一套内容在不同断点下重新排列。4.1 移动优先断点怎么选而不是抄很多模板直接抄来 320px、768px、1024px 三个断点结果在自己页面上要么内容提前换行要么大屏上卡片被拉得不成比例。选断点之前先把页面里最容易断行的元素找出来标题字号、卡片宽度、侧栏宽度。我一般会在浏览器里拖动窗口记录布局开始变难看的临界宽度再围绕这些数值取整作为断点。常见的断点参数表如下断点区间覆盖设备常见布局策略max-width: 575.98px手机竖屏单列、隐藏次要侧栏min-width: 576px和max-width: 767.98px手机横屏、小平板两列卡片min-width: 768px和max-width: 1199.98px平板、小笔记本主栏侧栏min-width: 1200px桌面显示器三列卡片、固定最大宽度注意 767.98px 而不是 768px这是为了避免在正好 768px 的屏幕上同时命中两个媒体查询导致样式冲突。用min-width写“向上适配”的规则可以免掉一大部分边界值判断。4.2 卡片流原生Flexbox写法和Bootstrap类写法对照博客首页最常见的就是卡片列表。用原生 Flexbox 实现时核心是flex-wrap加flex-basis写出来是这样.post-grid { display: flex; flex-wrap: wrap; gap: 16px; } .post-grid .post-item { flex: 1 1 100%; /* 小屏默认整行显示 */ } media (min-width: 768px) { .post-grid .post-item { flex: 1 1 calc(50% - 16px); /* 两列卡片 */ } } media (min-width: 1200px) { .post-grid .post-item { flex: 1 1 calc(33.3333% - 16px); /* 三列卡片 */ } }flex: 1 1 100%里的三个值分别是flex-grow、flex-shrink、flex-basis意思是允许放大、允许缩小、基础宽度是 100%。每次断点切换只改flex-basis就够gap: 16px会自动参与宽度计算所以卡片宽度要减去 16px 的间隙否则最后一行会被挤到下一行。如果你在源码里用了 Bootstrap 的栅格类这段逻辑不用自己写。Bootstrap 的.row自带display: flex; flex-wrap: wrap;里面的.col-md-6 .col-lg-4就等价于上面两段媒体查询section classrow post-grid article classcol-md-6 col-lg-4 post-item文章卡片1/article article classcol-md-6 col-lg-4 post-item文章卡片2/article article classcol-md-6 col-lg-4 post-item文章卡片3/article /section二者的取舍在于用框架类代码短、断点统一但框架自身的 CSS 会给你加很多用不到的样式手写 Flexbox加载量小断点完全可控但要自己维护边界。个人博客页面数量少我偏向手写。4.3 用Grid处理复杂区域“伪响应式”的坑Flexbox 适合一维排列也就是一行或一列如果博客首页是“头部大图 侧栏文章列表 底部推荐”这种块状分布CSS Grid 的可读性更好.home-layout { display: grid; grid-template-columns: 1fr 300px; grid-template-areas: hero aside posts aside footer aside; gap: 24px; }grid-template-areas把区域位置直接命名出来哪里放 hero、哪里放 posts 一目了然。配合媒体查询在小屏上只需一句media (max-width: 767.98px) { .home-layout { grid-template-columns: 1fr; grid-template-areas: hero posts aside footer; } }还有一个常见误区只在 CSS 里写媒体查询忘了head里的meta nameviewport contentwidthdevice-width, initial-scale1.0。没有这个标签手机浏览器会默认用 980px 的虚拟宽度渲染页面媒体查询的断点永远不生效这就是“伪响应式”。模板里如果没带这个 meta要手动补上。5. 用Web Storage和Service Worker做离线可用的博客博客的体验上限很多不在视觉而在“可用性”。信号差的地铁里打开一篇文章如果白屏再好看的设计也白搭。HTML5 的 Web Storage 和 Service Worker 提供了两条互补的离线能力路径。5.1 Web Storage记住主题与阅读记录Web Storage 分为localStorage和sessionStorage前者持久保存在本地后者在标签页关闭后失效。对博客来说最常见的用法是记住用户选择的主题// 进入页面时读取主题 const savedTheme localStorage.getItem(blog-theme) || light; document.documentElement.dataset.theme savedTheme; // 切换主题时写入 document.querySelector(#switchTheme).addEventListener(click, () { const current document.documentElement.dataset.theme; const next current light ? dark : light; document.documentElement.dataset.theme next; localStorage.setItem(blog-theme, next); });无论当前是light还是dark刷新后都会恢复到用户上次的选择。CSS 侧用属性选择器控制主题色html[data-themedark] { --bg-color: #1e1e1e; --text-color: #d4d4d4; }注意 localStorage 只能存字符串存对象时要JSON.stringify取出来再JSON.parse。它解决的是“状态记忆”不缓存任何页面资源和 Service Worker 是两回事。5.2 Service Worker断网也能读历史文章Service Worker 是浏览器后台的独立线程可以拦截整个页面发出的网络请求。它的注册代码很简单if (serviceWorker in navigator) { window.addEventListener(load, () { navigator.serviceWorker .register(/sw.js) .then((reg) console.log(SW 注册成功作用域, reg.scope)) .catch((err) console.error(SW 注册失败, err)); }); }把这段代码放进main.js同时创建一个/sw.js放在网站根目录。注意注册路径里的/sw.js是相对域名的绝对路径URL 是https://你的域名/sw.js如果博客部署在/blog/子目录下就要写成register(/blog/sw.js)否则会 404。5.3 缓存策略别乱选先看数据再决定sw.js里最核心的是缓存策略常见思路有这几种策略请求顺序适用场景仅缓存直接读缓存不常变的静态资源缓存优先缓存没有则走网络图片、CSS、头像网络优先网络失败则读缓存文章页、接口数据缓存后更新先给缓存再拿网络结果覆盖缓存博客正文、首页我一般会采用“缓存后更新”来缓存博客文章体验最好用户先看到上一次的缓存内容网络返回新内容后自动覆盖。实现如下const CACHE_NAME blog-cache-v1; self.addEventListener(install, (event) { self.skipWaiting(); }); self.addEventListener(activate, (event) { event.waitUntil( caches.keys().then((keys) Promise.all( keys .filter((key) key ! CACHE_NAME) .map((key) caches.delete(key)) ) ) ); self.clients.claim(); }); self.addEventListener(fetch, (event) { const request event.request; if (request.method ! GET) return; event.respondWith( caches.match(request).then((cached) { const network fetch(request) .then((res) { if (res res.status 200) { const clone res.clone(); caches.open(CACHE_NAME).then((cache) cache.put(request, clone)); } return res; }) .catch(() cached); return cached || network; }) ); });install事件里skipWaiting()让新版本 Service Worker 立即激活而不是等所有页面关闭后才生效activate里清理旧版缓存。fetch事件里先caches.match查缓存同时用fetch(request)发起真实请求成功后用res.clone()存入缓存。之所以要clone()是因为响应流只能使用一次直接存进缓存再返回给页面会让请求被切断。一个小坑是caches.put不能缓存 chrome-extension 协议或chrome://开头的请求常见于本地调试时服务栏控制台报错不影响正式环境。5.4 离线状态提示与网络感知Service Worker 做完之后页面上可以加一个状态提示window.addEventListener(offline, () { document.querySelector(#networkStatus).textContent 当前处于离线状态正在展示缓存内容; }); window.addEventListener(online, () { document.querySelector(#networkStatus).textContent ; });offline和online是浏览器原生事件navigator.onLine可以读取当前状态。提示文案不必做弹窗放在文章页顶部一行不出格的小条就够了。6. 上线前用半小时做一轮“白屏排错”部署到服务器之后最常见的场景是明明本地打开正常线上网址访问却是白屏。别急着改代码按排查顺序走一遍大多数问题半小时内定位。6.1 先查这五个位置序号排查对象常见的失败原因1控制台 Network 面板bootstrap.min.css404说明 CSS 路径写错2页面源码里的资源路径用了以/开头的绝对路径部署在子目录时失效3JS 是否有报错在head里引用了 DOM 节点浏览器还没解析到就执行4meta nameviewport是否缺失页面在手机端缩小显示看起来像没做响应式5是否残留http://混合内容页面是 HTTPS但引用了 HTTP 资源浏览器直接拦截我一般先看 Network 面板里第一个红色请求基本就是白屏源头。如果是 JS 在head里操作 DOM把script移到/body前或加上defer属性。defer会等文档解析完后执行不会阻塞页面渲染。6.2 给文章页加一条阅读进度线最后加一个低成本高感知的小交互文章页顶部有一条横向进度线随着滚动变长。实现逻辑不复杂div idreading-bar/div style #reading-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: #4a90d9; z-index: 99; } /style script const bar document.querySelector(#reading-bar); window.addEventListener(scroll, () { const doc document.documentElement; const max doc.scrollHeight - doc.clientHeight; if (max 0) { const pct Math.min(doc.scrollTop / max, 1); bar.style.width (pct * 100) %; } }, { passive: true }); /scriptscrollTop是当前已滚动的距离scrollHeight - clientHeight是最大可滚动距离两者相除得到进度比例。Math.min(…, 1)防止过度滚动时超出 100%。max为 0 的情况出现在文章内容不足一屏时直接跳过更新。{ passive: true }是告诉浏览器这个监听器不会调用preventDefault()可以使用更高效的滚动手势处理。把这段放到文章页的底部刷新页面滚动一下就能看到顶部的蓝色进度线在跟着内容移动。本文还有配套的精品资源点击获取 基于HTML5+CSS3的个人博客源码解析：从语义化到离线缓存
简介以HTML5和CSS3为核心构建的个人博客网站完整工程源码适合前端初学者、网页设计课程作业参考者及需要快速搭建个人博客的开发者。项目覆盖响应式布局、语义化标签、CSS3动画过渡和交互脚本等常见知识点可直接运行并支持二次修改。压缩包共324个文件大小约16.03MB。其中33个html页面构成博客主体结构25个css样式文件包含全局样式及Bootstrap相关样式23个js脚本负责交互与数据请求126张jpg与68张png等图片素材用于文章配图与界面展示另附字体、图标和少量PHP文件整体目录清晰便于按模块查找。目前已有335人学习下载。项目融合了HTML5离线存储、语义化标签与CSS3媒体查询、弹性布局等特性并引入Bootstrap辅助响应式设计对理解移动端适配、页面模块划分和静态资源组织方式都有直接参考价值。跟随源码梳理一遍样式与脚本实现能较快掌握从页面骨架搭建到视觉呈现的完整设计思路适合作为个人博客开发的起步样板。1. 为什么一份作业型HTML5博客源码值得拆开看前端这个圈子里能默写 flex 布局的人很多能独立把一个博客从零搭到上线的人比例没那么高。这个基于 HTML5CSS3 的个人博客网站设计与实现源码包从文件名就能看出是典型的作业型项目压缩包里有bootstrap.min.css和bootstrap.css目录名还留着YxwBlog-master的痕迹。别因为它带着“设计与实现”几个字就觉得低一档拆开看它把 HTML5 语义化结构、CSS3 动画参数、响应式断点、离线缓存这几样现代前端的看家功夫都过了一遍。新手可以拿它当练手模板熟手也能从动效延迟、填充模式这类细节里找回一点写项目的直觉。2. 从YxwBlog-master看目录骨架与HTML5语义化布局拿到压缩包先别急着双击 index.html。先看文件结构这类源码通常解压后能看到index.html、css/、js/、img/而压缩包里同时出现bootstrap.css和bootstrap.min.css说明项目实际引入了 Bootstrap。这两个文件的区别值得多说一句.min.css是压缩版去掉了换行和注释体积小、加载快而bootstrap.css保留了可读格式是在浏览器里定位样式问题时用的。我一般的习惯是开发期引用原版发布前全部切到.min版本。2.1 语义化标签博客的骨架不只是div早期博客模板满屏都是div idheader、div classcontent这类结构对浏览器和搜索引擎都不够友好。HTML5 引入的header、nav、main、article、section、aside、footer这组语义化标签把页面的区域职责直接写进标签名里导航就是nav正文就是article侧栏就是aside。对博客来说article的价值最大。搜索引擎在提取页面正文时看到article会比看到一串嵌套div更快锁定核心内容屏幕阅读器也可以让视障用户直接跳转到文章主体而不是从头朗读一遍导航菜单。这是纯用div布局很难做到的。骨架代码通常长这样body header classsite-header nav aria-label主导航 a href/首页/a a href/archive.html归档/a a href/about.html关于/a /nav /header main classcontainer section classrow article classcol-md-8 col-lg-8 h1HTML5 语义化标签到底改变了什么/h1 p文章内容……/p /article aside classcol-md-4 col-lg-4 h2作者信息/h2 p这里放头像和标签云/p /aside /section /main footer classsite-footer p© 2024 个人博客/p /footer /body这段结构里每层都有明确职责main告诉浏览器页面的主体内容在哪一块section classrow是 Bootstrap 的栅格行article和aside在里面做左右分栏。aria-label是给读屏器用的可访问性标记对只有一个nav的页面不是必须的但如果有多个nav就需要用它区分“主导航”和“页脚导航”。2.2 栅格系统三行代码搭出页面骨架这个项目引入 Bootstrap 的核心原因就是它自带的栅格系统。栅格把页面宽度横向切成 12 列所有列的宽度总和不超过 12 就能排在同一行。col-md-8表示在中等屏幕一般是平板横屏及以上下占 8 列col-lg-4表示在大屏下占 4 列剩下 4 列分给侧栏。代码里同时写了col-md-8和col-lg-8这在 Bootstrap 里是允许的小屏默认单列中等屏按 8:4 分栏大屏继续保持这个比例。如果你想在大屏上让侧栏更窄可以写成col-md-8 col-lg-9。栅格外层的.container会按断点自动设置最大宽度比如 768px 断点以下是全宽以上逐级变成 720px、960px、1140px。这里有个容易忽略的点.container本身有padding如果页面背景要做全宽通栏要把它放到.container外面。3. 博客里的多媒体与CSS3动效怎么落地博客页面最容易显得死板问题通常出在两处一是没有多媒体元素二是动效只有 hover 变色。HTML5 在这两项上给了足够的原生能力不需要再依赖 Flash 或复杂的 jQuery 插件。3.1 用video标签做博客头图视频附倍速控制HTML5 的video标签把视频播放变成了浏览器的内置能力controls属性直接带出播放条poster指定视频加载前的封面图。写视频源时最好同时准备 MP4 和 WebM 两种格式因为不同浏览器对编码格式的支持不一样。写这样一段video idintroVideo controls preloadmetadata posterimg/poster.jpg source srcmedia/intro-720.mp4 typevideo/mp4 source srcmedia/intro-720.webm typevideo/webm 你的浏览器不支持 HTML5 video请升级浏览器。 /video div button>canvas idbgCanvas/canvas script const canvas document.querySelector(#bgCanvas); const ctx canvas.getContext(2d); canvas.width canvas.offsetWidth; canvas.height canvas.offsetHeight; function drawFrame(t) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle hsl(${t / 20 % 360}, 80%, 60%); ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, 30 Math.sin(t / 300) * 15, 0, Math.PI * 2); ctx.fill(); requestAnimationFrame(drawFrame); } requestAnimationFrame(drawFrame); /scriptgetContext(2d)拿到绘图上下文所有绘制指令都通过它发出clearRect每帧清空画布避免上一帧图形残留。requestAnimationFrame的帧率由浏览器根据屏幕刷新率决定比setInterval定时器更平滑也更省电。注意canvas.width和 CSS 宽度不是一回事设置 CSS 宽度只影响显示大小绘图分辨率由属性决定响应式布局里要记得用canvas.offsetWidth同步实际像素。3.3 CSS3动画延迟、执行次数与逆向播放的参数配合CSS3 动画真正难的不是写keyframes而是理解执行时序。很多课程会把“css3动画延迟和完成后状态的保持”单独拆成一节就是因为这两个参数组合起来很容易翻车。先看延迟animation-delay让动画等一段时间再执行但它只延迟动画的开始不保证动画结束后的状态。看这段代码.article-card { opacity: 0; transform: translateY(24px); animation: floatIn .6s ease-out forwards; animation-delay: .15s; } .article-card:nth-child(2) { animation-delay: .3s; } .article-card:nth-child(3) { animation-delay: .45s; } keyframes floatIn { to { opacity: 1; transform: translateY(0); } }forwards是完状态保持的关键动画结束后元素保留最后一帧的样式。如果不写动画播完元素会跳回初始状态opacity 回到 0卡片直接消失。这个属性值的作用范围只覆盖自身所以延迟阶段元素仍然保持opacity: 0的初值。这样三张卡片会从 0.15s 开始依次浮入形成轻微的阶梯感。再看执行次数与方向。animation-iteration-count控制播放几遍animation-direction控制方向两者配合能做出很多看似复杂的往复效果.switch-line { animation: pulse 1s ease-in-out 3 alternate; } keyframes pulse { from { background-color: #4a90d9; } to { background-color: #ff7f50; } }这里3 alternate的含义是正向播放 3 次每次结束后反向播放一次最终呈现 前→后→前 的交替效果。如果把alternate换成reverse动画会从to那一帧开始向from播放。参数之间的关系可以这样整理参数取值示例实际效果animation-delay.15s动画开始前等待 0.15 秒animation-fill-modeforwards结束后保留最后一帧样式animation-iteration-count3/infinite播放 3 次或无限循环animation-directionalternate奇数次正向偶数次反向animation-directionreverse从to帧向from帧播放需要提醒的是动画结束后的“保持”效果只在animation-fill-mode生效期间存在。一旦你把元素改成display: none再显示动画会重新执行这不是 bug而是初始化后的正常行为。4. 断点设计媒体查询与Flexbox/Grid的响应式配合个人博客的访问场景比企业站更杂有人用手机看有人用平板还有人在 2560px 宽的大屏上打开两个窗口。响应式不是“在不同尺寸里做三套页面”而是同一套内容在不同断点下重新排列。4.1 移动优先断点怎么选而不是抄很多模板直接抄来 320px、768px、1024px 三个断点结果在自己页面上要么内容提前换行要么大屏上卡片被拉得不成比例。选断点之前先把页面里最容易断行的元素找出来标题字号、卡片宽度、侧栏宽度。我一般会在浏览器里拖动窗口记录布局开始变难看的临界宽度再围绕这些数值取整作为断点。常见的断点参数表如下断点区间覆盖设备常见布局策略max-width: 575.98px手机竖屏单列、隐藏次要侧栏min-width: 576px和max-width: 767.98px手机横屏、小平板两列卡片min-width: 768px和max-width: 1199.98px平板、小笔记本主栏侧栏min-width: 1200px桌面显示器三列卡片、固定最大宽度注意 767.98px 而不是 768px这是为了避免在正好 768px 的屏幕上同时命中两个媒体查询导致样式冲突。用min-width写“向上适配”的规则可以免掉一大部分边界值判断。4.2 卡片流原生Flexbox写法和Bootstrap类写法对照博客首页最常见的就是卡片列表。用原生 Flexbox 实现时核心是flex-wrap加flex-basis写出来是这样.post-grid { display: flex; flex-wrap: wrap; gap: 16px; } .post-grid .post-item { flex: 1 1 100%; /* 小屏默认整行显示 */ } media (min-width: 768px) { .post-grid .post-item { flex: 1 1 calc(50% - 16px); /* 两列卡片 */ } } media (min-width: 1200px) { .post-grid .post-item { flex: 1 1 calc(33.3333% - 16px); /* 三列卡片 */ } }flex: 1 1 100%里的三个值分别是flex-grow、flex-shrink、flex-basis意思是允许放大、允许缩小、基础宽度是 100%。每次断点切换只改flex-basis就够gap: 16px会自动参与宽度计算所以卡片宽度要减去 16px 的间隙否则最后一行会被挤到下一行。如果你在源码里用了 Bootstrap 的栅格类这段逻辑不用自己写。Bootstrap 的.row自带display: flex; flex-wrap: wrap;里面的.col-md-6 .col-lg-4就等价于上面两段媒体查询section classrow post-grid article classcol-md-6 col-lg-4 post-item文章卡片1/article article classcol-md-6 col-lg-4 post-item文章卡片2/article article classcol-md-6 col-lg-4 post-item文章卡片3/article /section二者的取舍在于用框架类代码短、断点统一但框架自身的 CSS 会给你加很多用不到的样式手写 Flexbox加载量小断点完全可控但要自己维护边界。个人博客页面数量少我偏向手写。4.3 用Grid处理复杂区域“伪响应式”的坑Flexbox 适合一维排列也就是一行或一列如果博客首页是“头部大图 侧栏文章列表 底部推荐”这种块状分布CSS Grid 的可读性更好.home-layout { display: grid; grid-template-columns: 1fr 300px; grid-template-areas: hero aside posts aside footer aside; gap: 24px; }grid-template-areas把区域位置直接命名出来哪里放 hero、哪里放 posts 一目了然。配合媒体查询在小屏上只需一句media (max-width: 767.98px) { .home-layout { grid-template-columns: 1fr; grid-template-areas: hero posts aside footer; } }还有一个常见误区只在 CSS 里写媒体查询忘了head里的meta nameviewport contentwidthdevice-width, initial-scale1.0。没有这个标签手机浏览器会默认用 980px 的虚拟宽度渲染页面媒体查询的断点永远不生效这就是“伪响应式”。模板里如果没带这个 meta要手动补上。5. 用Web Storage和Service Worker做离线可用的博客博客的体验上限很多不在视觉而在“可用性”。信号差的地铁里打开一篇文章如果白屏再好看的设计也白搭。HTML5 的 Web Storage 和 Service Worker 提供了两条互补的离线能力路径。5.1 Web Storage记住主题与阅读记录Web Storage 分为localStorage和sessionStorage前者持久保存在本地后者在标签页关闭后失效。对博客来说最常见的用法是记住用户选择的主题// 进入页面时读取主题 const savedTheme localStorage.getItem(blog-theme) || light; document.documentElement.dataset.theme savedTheme; // 切换主题时写入 document.querySelector(#switchTheme).addEventListener(click, () { const current document.documentElement.dataset.theme; const next current light ? dark : light; document.documentElement.dataset.theme next; localStorage.setItem(blog-theme, next); });无论当前是light还是dark刷新后都会恢复到用户上次的选择。CSS 侧用属性选择器控制主题色html[data-themedark] { --bg-color: #1e1e1e; --text-color: #d4d4d4; }注意 localStorage 只能存字符串存对象时要JSON.stringify取出来再JSON.parse。它解决的是“状态记忆”不缓存任何页面资源和 Service Worker 是两回事。5.2 Service Worker断网也能读历史文章Service Worker 是浏览器后台的独立线程可以拦截整个页面发出的网络请求。它的注册代码很简单if (serviceWorker in navigator) { window.addEventListener(load, () { navigator.serviceWorker .register(/sw.js) .then((reg) console.log(SW 注册成功作用域, reg.scope)) .catch((err) console.error(SW 注册失败, err)); }); }把这段代码放进main.js同时创建一个/sw.js放在网站根目录。注意注册路径里的/sw.js是相对域名的绝对路径URL 是https://你的域名/sw.js如果博客部署在/blog/子目录下就要写成register(/blog/sw.js)否则会 404。5.3 缓存策略别乱选先看数据再决定sw.js里最核心的是缓存策略常见思路有这几种策略请求顺序适用场景仅缓存直接读缓存不常变的静态资源缓存优先缓存没有则走网络图片、CSS、头像网络优先网络失败则读缓存文章页、接口数据缓存后更新先给缓存再拿网络结果覆盖缓存博客正文、首页我一般会采用“缓存后更新”来缓存博客文章体验最好用户先看到上一次的缓存内容网络返回新内容后自动覆盖。实现如下const CACHE_NAME blog-cache-v1; self.addEventListener(install, (event) { self.skipWaiting(); }); self.addEventListener(activate, (event) { event.waitUntil( caches.keys().then((keys) Promise.all( keys .filter((key) key ! CACHE_NAME) .map((key) caches.delete(key)) ) ) ); self.clients.claim(); }); self.addEventListener(fetch, (event) { const request event.request; if (request.method ! GET) return; event.respondWith( caches.match(request).then((cached) { const network fetch(request) .then((res) { if (res res.status 200) { const clone res.clone(); caches.open(CACHE_NAME).then((cache) cache.put(request, clone)); } return res; }) .catch(() cached); return cached || network; }) ); });install事件里skipWaiting()让新版本 Service Worker 立即激活而不是等所有页面关闭后才生效activate里清理旧版缓存。fetch事件里先caches.match查缓存同时用fetch(request)发起真实请求成功后用res.clone()存入缓存。之所以要clone()是因为响应流只能使用一次直接存进缓存再返回给页面会让请求被切断。一个小坑是caches.put不能缓存 chrome-extension 协议或chrome://开头的请求常见于本地调试时服务栏控制台报错不影响正式环境。5.4 离线状态提示与网络感知Service Worker 做完之后页面上可以加一个状态提示window.addEventListener(offline, () { document.querySelector(#networkStatus).textContent 当前处于离线状态正在展示缓存内容; }); window.addEventListener(online, () { document.querySelector(#networkStatus).textContent ; });offline和online是浏览器原生事件navigator.onLine可以读取当前状态。提示文案不必做弹窗放在文章页顶部一行不出格的小条就够了。6. 上线前用半小时做一轮“白屏排错”部署到服务器之后最常见的场景是明明本地打开正常线上网址访问却是白屏。别急着改代码按排查顺序走一遍大多数问题半小时内定位。6.1 先查这五个位置序号排查对象常见的失败原因1控制台 Network 面板bootstrap.min.css404说明 CSS 路径写错2页面源码里的资源路径用了以/开头的绝对路径部署在子目录时失效3JS 是否有报错在head里引用了 DOM 节点浏览器还没解析到就执行4meta nameviewport是否缺失页面在手机端缩小显示看起来像没做响应式5是否残留http://混合内容页面是 HTTPS但引用了 HTTP 资源浏览器直接拦截我一般先看 Network 面板里第一个红色请求基本就是白屏源头。如果是 JS 在head里操作 DOM把script移到/body前或加上defer属性。defer会等文档解析完后执行不会阻塞页面渲染。6.2 给文章页加一条阅读进度线最后加一个低成本高感知的小交互文章页顶部有一条横向进度线随着滚动变长。实现逻辑不复杂div idreading-bar/div style #reading-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: #4a90d9; z-index: 99; } /style script const bar document.querySelector(#reading-bar); window.addEventListener(scroll, () { const doc document.documentElement; const max doc.scrollHeight - doc.clientHeight; if (max 0) { const pct Math.min(doc.scrollTop / max, 1); bar.style.width (pct * 100) %; } }, { passive: true }); /scriptscrollTop是当前已滚动的距离scrollHeight - clientHeight是最大可滚动距离两者相除得到进度比例。Math.min(…, 1)防止过度滚动时超出 100%。max为 0 的情况出现在文章内容不足一屏时直接跳过更新。{ passive: true }是告诉浏览器这个监听器不会调用preventDefault()可以使用更高效的滚动手势处理。把这段放到文章页的底部刷新页面滚动一下就能看到顶部的蓝色进度线在跟着内容移动。本文还有配套的精品资源点击获取