-404页面开发)
文章目录1. 页面开发思路2. 404.html 完整页面代码3. 外层容器与盒子基础 CSS4. 404 大号数字标题 CSS5. 文字说明区域 CSS6. 返回首页按钮 CSS7. 本篇小结1. 页面开发思路本篇开发 404 页面404.html继续复用网站公共头部与底部。404 页面为错误提示页采用单栏居中布局不需要侧边栏用于友好提示用户访问的地址不存在。页面结构页面标题、大号 404 数字提示、说明文本、返回首页按钮样式风格延续项目淡蓝色主题圆角、阴影保持和全站统一2. 404.html 完整页面代码下面是 404 页面完整 HTML 结构header、footer 复用项目公共代码main 区域放置提示内容。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title页面不存在 - HTMLCSS实战博客/titlelinkrelstylesheethrefcss/style.css/headbodyheaderdivclasscontainerdivclassheader-innerdivclasslogoHTMLCSS实战/divnavulclassnav-listliahrefindex.html首页/a/liliahreflist.html文章列表/a/liliahrefarticle.html文章详情/a/liliahrefabout.html关于本站/a/li/ul/nav/div/div/headermaindivclasscontainerdivclasswrap-404divclassbox-404h2classnum-404404/h2h3抱歉你访问的页面不存在/h3p可能是网址输入错误、链接失效或者文章已经删除请检查访问地址。/pahrefindex.htmlclassbtn-back返回首页/a/div/div/div/mainfooterdivclasscontainerp©2026 HTMLCSS实战博客 版权所有/p/div/footer/body/html重点说明导航菜单和前面所有页面保持一致保证网站内页面互通404 页面属于错误页面导航链接不需要添加 active 高亮。当前效果3. 外层容器与盒子基础 CSS编写外层容器与 404 卡片基础样式追加到 style.css 原有样式后面。/*404页面外层容器*/.wrap-404{margin:40px 0;min-height:400px;display:flex;align-items:center;justify-content:center;}/*404内容卡片*/.box-404{background:#fff;border-radius:8px;box-shadow:0 2px 8px #d8e8f8;padding:40px;text-align:center;}重点说明外层容器使用 flex 实现垂直水平居中卡片沿用全站统一的白色底色、圆角与淡蓝色阴影视觉风格统一。当前效果4. 404 大号数字标题 CSS设置 404 数字的大小、颜色作为页面核心视觉。.num-404{font-size:120px;color:#4086d3;margin:0;line-height:1;opacity:0.6;}重点说明line-height:1 消除默认行高减少数字上下多余间距使用项目主色调淡蓝色降低透明度弱化冲击感。当前效果5. 文字说明区域 CSS设置小标题与段落样式调整间距和行高。.box-404 h3{font-size:24px;color:#222;margin:20px 0 12px;}.box-404 p{font-size:16px;line-height:1.8;color:#444;margin-bottom:30px;}重点说明行高 1.8 和全站正文保持一致保证阅读舒适度合理设置外边距控制模块之间留白。当前效果6. 返回首页按钮 CSS美化返回首页的超链接做成按钮样式增加 hover 交互效果。.btn-back{display:inline-block;padding:12px 28px;background-color:#4086d3;color:#fff;text-decoration:none;border-radius:6px;}.btn-back:hover{background-color:#3070b8;}重点说明a 标签转为 inline-block才可以设置 paddinghover 加深颜色和网站其他按钮交互逻辑保持统一。最终效果7. 本篇小结本篇完成 404 错误页面 404.html 的开发练习 Flex 居中布局、卡片组件复用、超链接按钮美化卡片样式、配色、阴影和前面开发的所有页面完全统一。
