简介这份个人博客网页设计HTML源码面向希望快速搭建个人站点的初学者与前端入门者提供一套可直接运行的静态博客主题用于展示作品、想法或日常生活。资源包共30个文件以27个gif装饰图、1张jpg头像、1个html页面和1个css样式表为主压缩包约37KB体积轻巧便于下载与二次修改。其中index.html定义页面头部、导航、文章与页脚等结构style.css通过类选择器、ID选择器控制字体、颜色、间距与盒模型布局images目录中的图片资源承担背景、分隔线与图标等视觉装饰。目前已有3820人学习下载适合作为HTML与CSS基础练习的参考案例。读者可借此理解网页结构组织、样式与内容分离的思路并在此基础上替换图片与文字快速改造成符合个人风格的博客页面。1. 个人博客网页设计html源码从一份静态骨架到能上线的站点很多人搜「个人博客网页设计html源码」脑子里想的是下载一个压缩包解压双击index.html浏览器里出现一个能看的博客然后改改文字就完事。我一开始也这么想直到帮朋友把一个「源码」部署到服务器上才发现问题导航点不动、手机端错位、文章页全是写死的假数据、CSS 里还引着本地绝对路径。所谓源码其实只是一张静态截图。这篇笔记要解决的就是把这个模糊的需求拆开一份能用的个人博客 html 源码到底由哪些文件组成每部分怎么写改哪里能变成自己的以及怎么从「本地能打开」走到「线上能访问」。适合两类人想自己手写一套博客页面的前端新手和拿到一份 html 模板却不知道怎么改成自己博客的从业者。下面按文件结构、页面骨架、样式布局、响应式、上线部署的顺序讲每一步都给能直接抄的代码。2. 一份个人博客 html 源码到底包含哪些文件2.1 最小可用目录结构与各文件职责先明确一件事纯 html 源码做的是「展示层」它不负责存文章、不负责评论、不负责登录。个人博客常见的做法是 html css js 三件套文章数据要么写死在 html 里要么用 js 从一个 json 文件读。目录结构我一般这么组织my-blog/ ├── index.html # 首页文章列表 ├── post.html # 文章详情页模板 ├── about.html # 关于页 ├── css/ │ ├── reset.css # 清除浏览器默认样式 │ └── style.css # 主样式 ├── js/ │ ├── main.js # 交互逻辑 │ └── posts.json # 文章数据可选 └── images/ └── avatar.jpg # 头像等静态资源这个结构的好处是职责清晰index.html只管首页结构style.css管所有视觉main.js管点击、加载、返回顶部这类行为。新手最容易犯的错是把样式写成行内style...几十个标签写下来改一个颜色要翻遍整个文件。把 css 抽出来是让源码「可维护」的第一步。posts.json是可选项。如果你只有几篇文章直接写在 html 里最省事如果文章会持续增加用 json 存数据、js 渲染列表改文章就不用动 html 结构。两种方式我都用过前者适合刚起步后者适合写到二三十篇以后。2.2 首页骨架从 doctype 到文章列表容器一份规范的 html 源码开头必须是!doctype html这行告诉浏览器用标准模式渲染少了它某些浏览器会进入怪异模式盒模型计算方式都变了布局直接翻车。下面是我常用的首页骨架!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title我的个人博客/title meta namedescription content记录前端与后端的学习笔记 link relstylesheet hrefcss/reset.css link relstylesheet hrefcss/style.css /head body header classsite-header a classlogo hrefindex.htmlMy Blog/a nav classnav a hrefindex.html首页/a a hrefabout.html关于/a /nav /header main classpost-list article classpost-item h2a hrefpost.html第一篇文章标题/a/h2 p classmeta2024-01-01 · 前端/p p classexcerpt这里是文章摘要控制在两行以内。/p /article /main footer classsite-footer p© 2024 My Blog/p /footer script srcjs/main.js/script /body /html逐块说明。meta charsetutf-8必须放在 head 最前面否则中文可能乱码这是血泪经验编码声明晚了浏览器已经按别的编码解析了。viewport那行是移动端适配的前提没有它手机上会按 980px 宽度渲染再缩小字小得看不清。main里每个article是一篇文章卡片h2放标题、meta放日期分类、excerpt放摘要。语义化标签header/nav/main/article/footer不只是好看它对 SEO 和读屏软件都有实际作用搜索引擎能据此判断哪块是正文。参数上langzh-cn影响的是浏览器选字体和断词规则写博客用中文就设成 zh-cn。title和description是搜索结果里显示的内容别偷懒写「首页」两个字。2.3 文章详情页与数据分离的两种做法文章页有两种写法。写死版每篇文章一个 html 文件内容直接写在article里优点是简单、SEO 友好缺点是文章多了文件爆炸。数据驱动版只有一个post.html用 js 读 url 参数再渲染对应内容// js/main.js const params new URLSearchParams(location.search); const id params.get(id) || 1; fetch(js/posts.json) .then(res res.json()) .then(posts { const post posts.find(p p.id id); if (!post) { document.querySelector(.post-body).textContent 文章不存在; return; } document.title post.title - 我的博客; document.querySelector(.post-title).textContent post.title; document.querySelector(.post-body).innerHTML post.content; }) .catch(() { document.querySelector(.post-body).textContent 加载失败请刷新重试; });这段逻辑是从地址栏拿id去posts.json里找对应文章找到就填进页面找不到给提示。URLSearchParams是现代浏览器都支持的原生方法不用引第三方库。fetch后面必须跟.catch否则网络断了页面一片空白用户不知道发生了什么。注意innerHTML直接插入内容有 XSS 风险如果文章内容来自用户输入要先转义自己写的博客内容可控问题不大。posts.json的结构建议这样[ { id: 1, title: 第一篇文章, date: 2024-01-01, content: p正文段落/p } ]id 用字符串而不是数字避免 url 参数类型转换的坑。content 里放 html 片段渲染时用 innerHTML 才能生效。3. 用 CSS 把骨架变成能看的博客页面3.1 reset 与主样式先归零再布局浏览器对 h1、p、ul 这些标签有默认的 margin 和 padding不同浏览器还不一样。不重置的话你在 Chrome 调好的间距到 Safari 就变了。reset.css我一般写最简版* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, PingFang SC, Microsoft YaHei, sans-serif; line-height: 1.7; color: #333; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; }box-sizing: border-box是关键它让 padding 和 border 算进元素宽度里否则你设width: 100%再加 padding元素就撑出容器了这是新手布局错位最常见的原因。字体栈里-apple-system让苹果设备用系统字体PingFang SC是中文字体Microsoft YaHei兜底 Windows最后 sans-serif 保底。line-height: 1.7是中文正文比较舒服的行高1.5 偏挤2.0 偏散。主样式style.css负责布局。首页文章列表用 flex 或 grid 都行单列博客用最简单的居中容器.site-header { display: flex; justify-content: space-between; align-items: center; max-width: 720px; margin: 0 auto; padding: 24px 16px; border-bottom: 1px solid #eee; } .post-list { max-width: 720px; margin: 0 auto; padding: 24px 16px; } .post-item { padding: 20px 0; border-bottom: 1px solid #f0f0f0; } .post-item h2 { font-size: 20px; margin-bottom: 8px; } .meta { font-size: 13px; color: #999; margin-bottom: 8px; } .excerpt { color: #666; }max-width: 720px加margin: 0 auto是经典的居中容器写法720px 是中文阅读比较舒适的行宽太宽眼睛要来回扫。justify-content: space-between让 logo 和导航分居两端。这些数值不是死的你可以按自己审美调但行宽别超过 800px。3.2 响应式三个断点让手机端不崩不做响应式手机上打开就是灾难。我一般设三个断点但个人博客其实两个就够media (max-width: 768px) { .site-header { flex-direction: column; gap: 12px; } .post-item h2 { font-size: 18px; } } media (max-width: 480px) { .post-list { padding: 16px 12px; } body { font-size: 15px; } }768px 是平板竖屏和手机横屏的分界480px 是手机竖屏。768 以下把 header 改成纵向排列导航不会挤成一团。480 以下缩小内边距和字号给内容留出更多空间。断点不是越多越好每多一个就多一份维护成本两个断点覆盖绝大多数设备。提示调试响应式别只靠浏览器缩放用开发者工具的 device toolbar 切到具体机型或者直接在真机上打开看缩放模拟和真实渲染有差异。3.3 返回顶部与暗色模式两个提升体验的小交互返回顶部是博客的标配实现很简单const btn document.querySelector(.back-to-top); window.addEventListener(scroll, () { btn.style.display window.scrollY 400 ? block : none; }); btn.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); });scrollY 400是滚动超过 400px 才显示按钮避免一进页面就冒出来。behavior: smooth让滚动有过渡动画比瞬间跳回舒服。这个阈值按页面高度调内容短的博客可以设小一点。暗色模式现在也算基础体验了用 CSS 变量配合媒体查询:root { --bg: #fff; --text: #333; } media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; --text: #ddd; } } body { background: var(--bg); color: var(--text); }prefers-color-scheme跟随系统设置用户系统开了暗色页面自动切换不用自己做开关。用 CSS 变量是为了改主题时只动一处所有引用变量的地方自动更新。4. 个人博客 html 源码避坑与常见问题排查4.1 中文乱码charset 位置和文件编码不一致现象页面中文显示成方块或乱码。原因通常是两个一是meta charsetutf-8没放在 head 最前面浏览器已经用默认编码解析了二是 html 文件本身保存的编码不是 utf-8比如 Windows 记事本默认存成 GBK。解决把 charset 声明提到 head 第一行编辑器里把文件另存为 utf-8 编码。VS Code 右下角能看到当前编码点一下就能改。4.2 手机端横向滚动条某个元素撑破了视口现象手机上页面能左右滑动右边多出一块空白。原因一般是某个元素宽度超过屏幕常见的是固定宽度的图片、超长的英文单词、或者加了 padding 的 100% 宽度元素。解决先给body加overflow-x: hidden应急然后逐个检查元素。用开发者工具选中元素看它的实际宽度超过视口宽度的就是元凶。图片加max-width: 100%长单词加word-break: break-all。4.3 本地能打开线上 404路径大小写和相对路径现象本地双击 html 一切正常传到服务器后 css、js、图片全加载不出来。原因Linux 服务器区分文件名大小写本地 Windows 不区分Style.css和style.css在本地都能找到线上就 404。另外绝对路径/css/style.css在子目录部署时会指错位置。解决统一用小写文件名引用一律用相对路径css/style.css部署前在本地起个静态服务器测一遍别只靠双击文件。4.4 fetch 加载 json 失败跨域和 file 协议现象用 js 读posts.json本地双击打开时控制台报 CORS 或跨域错误文章列表空白。原因浏览器对file://协议下的 fetch 有安全限制不允许读本地文件。解决本地起一个静态服务器比如python -m http.server 8000然后访问http://localhost:8000。这不是代码问题是协议限制部署到线上 http 环境就正常了。4.5 样式改了没生效缓存和优先级现象改了 css 刷新页面没变化。原因浏览器缓存了旧 css或者新样式被更高优先级的规则覆盖。解决先强制刷新CtrlShiftR还不行就打开开发者工具看元素的实际生效样式被划掉的就是被覆盖了。行内样式优先级高于 id 高于 class选择器越具体优先级越高。实在不行给样式加!important应急但别滥用后面维护会痛苦。5. 从源码到上线静态托管与自定义域名5.1 三种部署方式的选择纯静态博客的部署常见三条路。一是对象存储加 CDN把文件传上去开静态网站功能成本低、速度快适合访问量稳定的博客。二是静态托管平台连上代码仓库自动构建部署推代码就上线适合频繁更新的。三是自己买服务器配 nginx灵活但要自己维护适合想顺便练运维的。我一般推荐前两种个人博客没必要为部署耗太多精力。nginx 配置静态博客的核心就几行server { listen 80; server_name your-domain.com; root /var/www/my-blog; index index.html; location / { try_files $uri $uri/ 404; } }root指向文件目录index指定默认首页try_files按顺序找文件找不到返回 404。改完nginx -t测配置nginx -s reload重载。5.2 上线前的自检清单部署前我会过一遍这几项所有链接点一遍确认不 404手机和电脑各看一遍布局控制台没有报错title和description每页都不同图片都压缩过单张别超过 200KBposts.json路径正确。这几项花十分钟能省掉上线后被访问者发现的尴尬。5.3 一个容易被忽略的细节文章页的 SEO数据驱动渲染的文章页搜索引擎爬虫可能抓不到 js 渲染的内容。如果在意 SEO文章页要么写死 html要么做服务端渲染。纯静态博客的折中做法是首页和文章列表用 js 渲染没问题但每篇文章生成独立的静态 html 文件。很多静态站点生成器就是干这个的把 markdown 编译成 html。如果你坚持手写至少保证文章标题和正文在 html 源码里能直接看到而不是全靠 js 填。我自己的习惯是每写完一篇就本地起服务器完整点一遍确认没有死链、没有错位再推上去。这套 html 源码方案不复杂但细节决定它是一份「能看的模板」还是一个「能用的博客」。希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/6 16:54:26 · 阅读 1.2k 个人博客网页设计html源码：从静态骨架到上线部署的完整指南
简介这份个人博客网页设计HTML源码面向希望快速搭建个人站点的初学者与前端入门者提供一套可直接运行的静态博客主题用于展示作品、想法或日常生活。资源包共30个文件以27个gif装饰图、1张jpg头像、1个html页面和1个css样式表为主压缩包约37KB体积轻巧便于下载与二次修改。其中index.html定义页面头部、导航、文章与页脚等结构style.css通过类选择器、ID选择器控制字体、颜色、间距与盒模型布局images目录中的图片资源承担背景、分隔线与图标等视觉装饰。目前已有3820人学习下载适合作为HTML与CSS基础练习的参考案例。读者可借此理解网页结构组织、样式与内容分离的思路并在此基础上替换图片与文字快速改造成符合个人风格的博客页面。1. 个人博客网页设计html源码从一份静态骨架到能上线的站点很多人搜「个人博客网页设计html源码」脑子里想的是下载一个压缩包解压双击index.html浏览器里出现一个能看的博客然后改改文字就完事。我一开始也这么想直到帮朋友把一个「源码」部署到服务器上才发现问题导航点不动、手机端错位、文章页全是写死的假数据、CSS 里还引着本地绝对路径。所谓源码其实只是一张静态截图。这篇笔记要解决的就是把这个模糊的需求拆开一份能用的个人博客 html 源码到底由哪些文件组成每部分怎么写改哪里能变成自己的以及怎么从「本地能打开」走到「线上能访问」。适合两类人想自己手写一套博客页面的前端新手和拿到一份 html 模板却不知道怎么改成自己博客的从业者。下面按文件结构、页面骨架、样式布局、响应式、上线部署的顺序讲每一步都给能直接抄的代码。2. 一份个人博客 html 源码到底包含哪些文件2.1 最小可用目录结构与各文件职责先明确一件事纯 html 源码做的是「展示层」它不负责存文章、不负责评论、不负责登录。个人博客常见的做法是 html css js 三件套文章数据要么写死在 html 里要么用 js 从一个 json 文件读。目录结构我一般这么组织my-blog/ ├── index.html # 首页文章列表 ├── post.html # 文章详情页模板 ├── about.html # 关于页 ├── css/ │ ├── reset.css # 清除浏览器默认样式 │ └── style.css # 主样式 ├── js/ │ ├── main.js # 交互逻辑 │ └── posts.json # 文章数据可选 └── images/ └── avatar.jpg # 头像等静态资源这个结构的好处是职责清晰index.html只管首页结构style.css管所有视觉main.js管点击、加载、返回顶部这类行为。新手最容易犯的错是把样式写成行内style...几十个标签写下来改一个颜色要翻遍整个文件。把 css 抽出来是让源码「可维护」的第一步。posts.json是可选项。如果你只有几篇文章直接写在 html 里最省事如果文章会持续增加用 json 存数据、js 渲染列表改文章就不用动 html 结构。两种方式我都用过前者适合刚起步后者适合写到二三十篇以后。2.2 首页骨架从 doctype 到文章列表容器一份规范的 html 源码开头必须是!doctype html这行告诉浏览器用标准模式渲染少了它某些浏览器会进入怪异模式盒模型计算方式都变了布局直接翻车。下面是我常用的首页骨架!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title我的个人博客/title meta namedescription content记录前端与后端的学习笔记 link relstylesheet hrefcss/reset.css link relstylesheet hrefcss/style.css /head body header classsite-header a classlogo hrefindex.htmlMy Blog/a nav classnav a hrefindex.html首页/a a hrefabout.html关于/a /nav /header main classpost-list article classpost-item h2a hrefpost.html第一篇文章标题/a/h2 p classmeta2024-01-01 · 前端/p p classexcerpt这里是文章摘要控制在两行以内。/p /article /main footer classsite-footer p© 2024 My Blog/p /footer script srcjs/main.js/script /body /html逐块说明。meta charsetutf-8必须放在 head 最前面否则中文可能乱码这是血泪经验编码声明晚了浏览器已经按别的编码解析了。viewport那行是移动端适配的前提没有它手机上会按 980px 宽度渲染再缩小字小得看不清。main里每个article是一篇文章卡片h2放标题、meta放日期分类、excerpt放摘要。语义化标签header/nav/main/article/footer不只是好看它对 SEO 和读屏软件都有实际作用搜索引擎能据此判断哪块是正文。参数上langzh-cn影响的是浏览器选字体和断词规则写博客用中文就设成 zh-cn。title和description是搜索结果里显示的内容别偷懒写「首页」两个字。2.3 文章详情页与数据分离的两种做法文章页有两种写法。写死版每篇文章一个 html 文件内容直接写在article里优点是简单、SEO 友好缺点是文章多了文件爆炸。数据驱动版只有一个post.html用 js 读 url 参数再渲染对应内容// js/main.js const params new URLSearchParams(location.search); const id params.get(id) || 1; fetch(js/posts.json) .then(res res.json()) .then(posts { const post posts.find(p p.id id); if (!post) { document.querySelector(.post-body).textContent 文章不存在; return; } document.title post.title - 我的博客; document.querySelector(.post-title).textContent post.title; document.querySelector(.post-body).innerHTML post.content; }) .catch(() { document.querySelector(.post-body).textContent 加载失败请刷新重试; });这段逻辑是从地址栏拿id去posts.json里找对应文章找到就填进页面找不到给提示。URLSearchParams是现代浏览器都支持的原生方法不用引第三方库。fetch后面必须跟.catch否则网络断了页面一片空白用户不知道发生了什么。注意innerHTML直接插入内容有 XSS 风险如果文章内容来自用户输入要先转义自己写的博客内容可控问题不大。posts.json的结构建议这样[ { id: 1, title: 第一篇文章, date: 2024-01-01, content: p正文段落/p } ]id 用字符串而不是数字避免 url 参数类型转换的坑。content 里放 html 片段渲染时用 innerHTML 才能生效。3. 用 CSS 把骨架变成能看的博客页面3.1 reset 与主样式先归零再布局浏览器对 h1、p、ul 这些标签有默认的 margin 和 padding不同浏览器还不一样。不重置的话你在 Chrome 调好的间距到 Safari 就变了。reset.css我一般写最简版* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, PingFang SC, Microsoft YaHei, sans-serif; line-height: 1.7; color: #333; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; }box-sizing: border-box是关键它让 padding 和 border 算进元素宽度里否则你设width: 100%再加 padding元素就撑出容器了这是新手布局错位最常见的原因。字体栈里-apple-system让苹果设备用系统字体PingFang SC是中文字体Microsoft YaHei兜底 Windows最后 sans-serif 保底。line-height: 1.7是中文正文比较舒服的行高1.5 偏挤2.0 偏散。主样式style.css负责布局。首页文章列表用 flex 或 grid 都行单列博客用最简单的居中容器.site-header { display: flex; justify-content: space-between; align-items: center; max-width: 720px; margin: 0 auto; padding: 24px 16px; border-bottom: 1px solid #eee; } .post-list { max-width: 720px; margin: 0 auto; padding: 24px 16px; } .post-item { padding: 20px 0; border-bottom: 1px solid #f0f0f0; } .post-item h2 { font-size: 20px; margin-bottom: 8px; } .meta { font-size: 13px; color: #999; margin-bottom: 8px; } .excerpt { color: #666; }max-width: 720px加margin: 0 auto是经典的居中容器写法720px 是中文阅读比较舒适的行宽太宽眼睛要来回扫。justify-content: space-between让 logo 和导航分居两端。这些数值不是死的你可以按自己审美调但行宽别超过 800px。3.2 响应式三个断点让手机端不崩不做响应式手机上打开就是灾难。我一般设三个断点但个人博客其实两个就够media (max-width: 768px) { .site-header { flex-direction: column; gap: 12px; } .post-item h2 { font-size: 18px; } } media (max-width: 480px) { .post-list { padding: 16px 12px; } body { font-size: 15px; } }768px 是平板竖屏和手机横屏的分界480px 是手机竖屏。768 以下把 header 改成纵向排列导航不会挤成一团。480 以下缩小内边距和字号给内容留出更多空间。断点不是越多越好每多一个就多一份维护成本两个断点覆盖绝大多数设备。提示调试响应式别只靠浏览器缩放用开发者工具的 device toolbar 切到具体机型或者直接在真机上打开看缩放模拟和真实渲染有差异。3.3 返回顶部与暗色模式两个提升体验的小交互返回顶部是博客的标配实现很简单const btn document.querySelector(.back-to-top); window.addEventListener(scroll, () { btn.style.display window.scrollY 400 ? block : none; }); btn.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); });scrollY 400是滚动超过 400px 才显示按钮避免一进页面就冒出来。behavior: smooth让滚动有过渡动画比瞬间跳回舒服。这个阈值按页面高度调内容短的博客可以设小一点。暗色模式现在也算基础体验了用 CSS 变量配合媒体查询:root { --bg: #fff; --text: #333; } media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; --text: #ddd; } } body { background: var(--bg); color: var(--text); }prefers-color-scheme跟随系统设置用户系统开了暗色页面自动切换不用自己做开关。用 CSS 变量是为了改主题时只动一处所有引用变量的地方自动更新。4. 个人博客 html 源码避坑与常见问题排查4.1 中文乱码charset 位置和文件编码不一致现象页面中文显示成方块或乱码。原因通常是两个一是meta charsetutf-8没放在 head 最前面浏览器已经用默认编码解析了二是 html 文件本身保存的编码不是 utf-8比如 Windows 记事本默认存成 GBK。解决把 charset 声明提到 head 第一行编辑器里把文件另存为 utf-8 编码。VS Code 右下角能看到当前编码点一下就能改。4.2 手机端横向滚动条某个元素撑破了视口现象手机上页面能左右滑动右边多出一块空白。原因一般是某个元素宽度超过屏幕常见的是固定宽度的图片、超长的英文单词、或者加了 padding 的 100% 宽度元素。解决先给body加overflow-x: hidden应急然后逐个检查元素。用开发者工具选中元素看它的实际宽度超过视口宽度的就是元凶。图片加max-width: 100%长单词加word-break: break-all。4.3 本地能打开线上 404路径大小写和相对路径现象本地双击 html 一切正常传到服务器后 css、js、图片全加载不出来。原因Linux 服务器区分文件名大小写本地 Windows 不区分Style.css和style.css在本地都能找到线上就 404。另外绝对路径/css/style.css在子目录部署时会指错位置。解决统一用小写文件名引用一律用相对路径css/style.css部署前在本地起个静态服务器测一遍别只靠双击文件。4.4 fetch 加载 json 失败跨域和 file 协议现象用 js 读posts.json本地双击打开时控制台报 CORS 或跨域错误文章列表空白。原因浏览器对file://协议下的 fetch 有安全限制不允许读本地文件。解决本地起一个静态服务器比如python -m http.server 8000然后访问http://localhost:8000。这不是代码问题是协议限制部署到线上 http 环境就正常了。4.5 样式改了没生效缓存和优先级现象改了 css 刷新页面没变化。原因浏览器缓存了旧 css或者新样式被更高优先级的规则覆盖。解决先强制刷新CtrlShiftR还不行就打开开发者工具看元素的实际生效样式被划掉的就是被覆盖了。行内样式优先级高于 id 高于 class选择器越具体优先级越高。实在不行给样式加!important应急但别滥用后面维护会痛苦。5. 从源码到上线静态托管与自定义域名5.1 三种部署方式的选择纯静态博客的部署常见三条路。一是对象存储加 CDN把文件传上去开静态网站功能成本低、速度快适合访问量稳定的博客。二是静态托管平台连上代码仓库自动构建部署推代码就上线适合频繁更新的。三是自己买服务器配 nginx灵活但要自己维护适合想顺便练运维的。我一般推荐前两种个人博客没必要为部署耗太多精力。nginx 配置静态博客的核心就几行server { listen 80; server_name your-domain.com; root /var/www/my-blog; index index.html; location / { try_files $uri $uri/ 404; } }root指向文件目录index指定默认首页try_files按顺序找文件找不到返回 404。改完nginx -t测配置nginx -s reload重载。5.2 上线前的自检清单部署前我会过一遍这几项所有链接点一遍确认不 404手机和电脑各看一遍布局控制台没有报错title和description每页都不同图片都压缩过单张别超过 200KBposts.json路径正确。这几项花十分钟能省掉上线后被访问者发现的尴尬。5.3 一个容易被忽略的细节文章页的 SEO数据驱动渲染的文章页搜索引擎爬虫可能抓不到 js 渲染的内容。如果在意 SEO文章页要么写死 html要么做服务端渲染。纯静态博客的折中做法是首页和文章列表用 js 渲染没问题但每篇文章生成独立的静态 html 文件。很多静态站点生成器就是干这个的把 markdown 编译成 html。如果你坚持手写至少保证文章标题和正文在 html 源码里能直接看到而不是全靠 js 填。我自己的习惯是每写完一篇就本地起服务器完整点一遍确认没有死链、没有错位再推上去。这套 html 源码方案不复杂但细节决定它是一份「能看的模板」还是一个「能用的博客」。希望帮到你。本文还有配套的精品资源点击获取