最近帮一个刚学完 HTML 和 CSS 的朋友整理他人生中第一个多页面站点项目名就叫《天津 htmlcss 5页》。听名字就知道这是一个纯静态站点5 个页面共享一套导航和风格不碰框架、不碰构建工具连后端都不需要。这种项目在起步阶段特别常见很多教程和培训班都会安排但正因为看起来太简单翻车的点反而密集CSS 文件引不进来、导航到了别的页面高亮没了、图片一压缩就变形、窗口一拖窄就乱成一团。这篇文章不打算复述 HTML 标签怎么背而是想把我整理这个项目的过程完整记录下来从 5 个页面怎么规划、目录怎么建、公共样式怎么拆到每一页的关键代码、布局选型、响应式断点最后是一份我用教训换来的常见问题速查表。适合刚学完基础语法、正准备做第一个完整项目的朋友参考也适合那些想把“能打开”做成“能交差”的同学直接抄作业。1. 项目拆解5页怎么拆目录怎么建1.1 为什么必须是5个页面而不是一个长页面很多新手会问一个长页面滚到底不也挺好的为什么非要拆成 5 个我的看法是拆页面的目的不是为了增加工作量而是为了练一套多页面站点的核心能力页面之间的跳转关系、导航当前状态的标识、公共头部底部的复用还有相对路径的管理。你写一个长页面永远不会有“当前页高亮”这个需求也体会不到修改导航栏时要同时改 5 个文件的痛苦而这些恰恰是真实项目里每天都要面对的事。5 个页面也是经过考量的首页对应品牌展示和引流关于页对应介绍和信任背书服务页对应业务列表联系页对应线索转化登录页对应用户入口。这 5 种形态几乎覆盖了绝大多数中小型站点的基础模块。换句话说做完这个项目你以后接到“给我做个 5 页左右的官网”这种需求脑子里立刻能浮现出结构而不是打开编辑器开始瞎写。还有一个很现实的好处评审、老师或者甲方看作品时5 个页面能体现你的“整体把控力”。单页再花哨别人也只会觉得你堆了一个页面而 5 个页面风格统一、导航流畅、每页有每页的重点观感完全是另一个档次。1.2 目录结构和页面命名怎么设计才不会乱我建议第一版就把目录结构定成下面这样不要边写边加文件夹。这个结构对新手最友好对后续部署也最稳妥tianjin-demo/ ├── index.html ├── about.html ├── services.html ├── contact.html ├── login.html ├── css/ │ ├── common.css │ ├── index.css │ ├── about.css │ ├── services.css │ ├── contact.css │ └── login.css └── images/ ├── hero.jpg ├── team-1.jpg └── map.png页面文件全放根目录是我反复推荐给新手的方式。原因有两条第一index.html 必须待在根目录因为部署到任意静态托管平台时站点入口默认就是根目录下的 index.html第二5 个页面全放一层CSS 和图片的相对路径非常简单不用操心../往上跳一级的问题减少初学者最常犯的路径错误。CSS 文件拆成 common 每页一个独立文件是这套结构的核心。common.css 存放所有页面共用的 reset、CSS 变量、header、footer、按钮、标题统一风格index.css、about.css 这些则只写当前页面独有的样式。不要把所有页面样式塞进一个 style.css页面多了以后那就是几千行的泥潭改一个地方生怕碰到另一个地方。拆开之后每次改动影响范围一目了然。命名方面坚持小写英文加中划线也就是 kebab-caseabout.html、services.html、contact.html。千万别用“关于我们.html”这种中文文件名轻则某些环境下路径乱码重则部署后直接 404。1.3 HTML 里引入 CSS 的三种方式优先级别搞反这个项目里最常被问到的就是“我明明写了 CSS怎么页面没有任何样式”。很多时候不是代码错了而是引入方式、引入顺序出了问题。HTML 引入 CSS 就三种方式方式写法适用场景优先级外部样式表link relstylesheet hrefcss/common.css多页面站点最推荐低文档内样式style.../style单页 demo、临时覆盖中内联样式p stylecolor:red极不推荐高很多人只知道“内联优先级最高”却忽略了同优先级下的覆盖规则后出现的覆盖先出现的。所以我在 common.css 里定义按钮颜色在 index.css 里又写了一层按钮颜色两个都是类选择器谁放在后面谁说了算。这本身不是什么大问题但一旦页面多了你会在某个页面里疯狂加!important最终把自己逼疯。我的经验是common.css 负责“几乎所有页面都要用的东西”页面专属 CSS 只负责“这个页面特有的东西”。如果你还想更进一步把 CSS 变量也放进 common.css 的开头后面配色、圆角、阴影全部引用变量调整主题时只改一处5 个页面同时变色那种爽感只有试过才知道。2. 每个页面的核心结构与实现建议2.1 首页首屏、导航高亮、卡片入口和页脚首页是全站的门面我一般把它拆成四个模块导航栏、首屏 hero、介绍卡片、页脚。导航栏是所有页面的公共组件5 个页面必须保持完全一致唯一变化的是当前页那一项加上active类。结构长这样header classsite-header div classcontainer nav-wrap a hrefindex.html classlogo津门生活/a nav classnav ul classnav-list lia hrefindex.html classactive首页/a/li lia hrefabout.html关于我们/a/li lia hrefservices.html服务项目/a/li lia hrefcontact.html联系我们/a/li lia hreflogin.html登录/a/li /ul /nav /div /header对应的高亮样式很简单但很多人会忽略.nav-list a.active { color: var(--primary); font-weight: 600; }首屏 hero 区不要堆太多内容。一张合适的背景图、一行大标题、几句副标题、两个按钮够了。按钮要用a而不是button因为你要让它跳到其他页面section classhero h1发现天津的另一种生活方式/h1 p从文化街区到本地好店我们帮你整理一座城市的精彩。/p a hrefabout.html classbtn btn-primary了解我们/a a hrefcontact.html classbtn btn-outline联系我们/a /section首页还需要一小块“推荐服务”卡片区三张卡片横排每张卡片放一个图标、一段标题、一句描述和“查看详情”链接。这个卡片区是从首页跳到服务页的自然入口也是你练习 flex 或 grid 的好地方。页脚我通常放三列站点简介、快速链接、联系方式版权信息放最下面。2.2 关于页图文混排、时间线和团队卡片关于页要回答“我们是谁”和“我们做过什么”所以结构我习惯这样排页面小标题、图文两栏介绍、公司或团队的时间线、核心成员卡片。图文两栏是最经典的双栏布局左边图片右边文字用 flex 实现section classabout-intro div classabout-img img srcimages/team.jpg alt团队合影 /div div classabout-text h2我们是一群热爱天津的本地人/h2 p从 2016 年开始……/p /div /section.about-intro { display: flex; align-items: center; gap: 40px; } .about-intro .about-img { flex: 1; } .about-intro .about-text { flex: 1; }时间线是一道很加分的题。不需要任何框架用无序列表加伪元素就能画出像样的时间轴.timeline { border-left: 2px solid #eee; padding-left: 24px; } .timeline li { position: relative; padding: 12px 0 12px 16px; } .timeline li::before { content: ; position: absolute; left: -29px; top: 20px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }这里的关键是给li设置position: relative伪元素才能定位到左侧的圆点上。如果不加圆点会跑到整个页面的某个角落这是新手最容易踩的坑。团队卡片用 flex 横排即可。头像注意两个细节固定宽高后要加object-fit: cover防止图片被压扁想做成圆形头像就border-radius: 50%。如果不加object-fit: cover原本正方形的照片还好长条形照片会变得面目全非。2.3 服务页卡片网格、价格表和 hover 动效服务页是内容最多的一页我建议做一个服务卡片网格加一个价格表。卡片网格用 grid 最顺手.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }repeat(3, 1fr)的意思是三等分剩余空间每一列都平均分配宽度不管容器是 900px 还是 1140px它都能自动适配。卡片内部的 hover 动效不要做得太夸张微微上浮加阴影加深就够了.service-card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; } .service-card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1); }如果你想让卡片 hover 时不那么单调还可以加一个“涟漪光圈扩散”的效果。原理是用伪元素生成一个径向渐变默认透明hover 时让透明度过渡到 1视觉上就像水面泛开一圈光晕.service-card { position: relative; overflow: hidden; } .service-card::before { content: ; position: absolute; inset: 0; background: radial-gradient(circle, rgba(27, 107, 147, 0.18), transparent 70%); opacity: 0; transition: opacity 0.45s ease; } .service-card:hover::before { opacity: 1; }价格表里我习惯用“标准价 划线原价”的组合划线价直接用del标签就够了CSS 里对应的是text-decoration: line-through。别为了显示一根线单独发明一个类语义标签比自定义样式更可靠。服务卡片里如果要用 3D 效果记住一个原则3D 旋转适合图片墙、海报墙不适合带大段正文的卡片。真要用rotateY(60deg) translateZ(300px)先把perspective加在父容器上否则 3D 效果出不来。正负判断我提供一个笨方法加 perspective 后把rotateY从 0 调到 60边调边看右边往屏幕里缩、左边往屏幕外伸说明正值是“右后左前”。这个规则记不记都行上手调一次就有手感了。2.4 联系页表单结构、输入框状态和提交路径联系页是 5 个页面里交互性最强的一页核心是一张留言表单。表单结构要注意label的for属性必须和输入框的id对应否则点击文字时不会聚焦到输入框占位符只是提示替代不了标签form actionsuccess.html methodget div classform-item label forname姓名/label input typetext idname namename placeholder怎么称呼你 required /div div classform-item label fortel电话/label input typetel idtel nametel placeholder11位手机号 pattern1[3-9]\d{9} /div div classform-item label formessage留言内容/label textarea idmessage namemessage rows4 placeholder想了解什么服务 required/textarea /div button typesubmit classbtn btn-primary发送留言/button /form输入框默认样式很丑但只要统一做一遍整页质感立刻提升.form-item input, .form-item textarea { width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 8px; font: inherit; transition: border-color 0.2s, box-shadow 0.2s; } .form-item input:focus, .form-item textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(27, 107, 147, 0.15); }纯静态站没有后端表单提交到哪最简单的方案是加一个成功提示页比如 success.htmlactionsuccess.html methodget用户点提交后会跳到成功页同时 URL 上带着表单参数。虽然是裸奔的演示流程但对于一个纯 HTMLCSS 项目来说已经够了。如果你不希望页面跳转也可以让action#但这样点提交会刷新当前页输入内容全丢体验不太好。联系信息那边我用dl列表来放电话、邮箱、地址语义清晰也不用额外定列表样式。地图建议用一张静态占位图代替 iframe因为本地file://协议下外嵌地图容易加载失败而且静态图不依赖网络展示效果更可控。2.5 登录页居中卡片、渐变按钮和表单细节第五页我选了登录页因为这是几乎所有网站都会有的入口也是练“垂直水平居中”和“输入框状态”的最好载体。布局代码非常短但很常用.login-page { min-height: calc(100vh - 140px); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0f2027, #2c5364); } .login-card { width: 360px; background: #fff; border-radius: 16px; padding: 40px 32px; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18); }登录按钮我建议给一个渐变背景比纯色更有记忆点.btn-gradient { background: linear-gradient(135deg, #1b6b93, #4b9ac6); color: #fff; border: none; border-radius: 12px; padding: 12px 20px; cursor: pointer; transition: filter 0.3s, transform 0.2s; } .btn-gradient:hover { filter: brightness(1.08); transform: translateY(-2px); }filter: brightness(1.08)的作用是让渐变按钮悬停时整体变亮一点比单独换背景色更柔和。如果你懒得自绘 checkbox 样式在input[typecheckbox]上直接设accent-color: var(--primary)就能让原生勾选框换主题色一行 CSS 解决。登录页的“注册/忘记密码”链接也不可少哪怕注册页不在 5 页范围内也可以先指向contact.html至少保证每个链接都有去处不会出现点击后空白页。3. 布局与视觉从“能用”到“耐看”3.1 HTMLCSS 的几种布局方式实战到底选哪种网上不少文章会把“HTML CSS 布局”总结成五种方式普通文档流、浮动布局、定位布局、flex 弹性布局、grid 网格布局。这个分类没毛病但我想说点更实在的每种方式到底什么时候用。方式典型场景注意事项文档流文字排版、块级标签顺序排列块级元素不会自动水平居中float图片环绕文字、老网站兼容必须处理浮动塌陷position吸顶导航、返回顶部、弹窗遮罩脱离文档流需自行计算位置flex导航栏、按钮组、卡片横排、居中IE 里gap可能失效grid卡片网格、整页大面积分区老浏览器兼容差我自己的选择原则很简单一维排列用 flex二维网格用 grid图片需要被文字环绕时才用 float。新手最容易犯的错误是拿 float 做导航和卡片然后满世界找人问“为什么父元素高度没了”。没必要这样折磨自己现代浏览器里 flex 才是默认答案。3.2 公共头部和底部复制粘贴还是动态加载一个 5 页静态站头部和底部在 5 个文件里各出现一次。第一次写的时候你觉得无所谓等写到第三页发现导航要加一项你才开始后悔当初没有规划好。这里我给三条路按项目复杂度选第一直接复制。适合 5 页上下的小项目成本最低但维护时一定要用编辑器的全局查找替换别一个一个手改。第二用 JS 动态加载。把公共头部写成一段 JS 字符串每页调用后写入 DOM优点是以后只改一处缺点是在本地file://协议下fetch请求本地文件会被浏览器拦截得用 Live Server 或本地静态服务器。第三用 iframe 复用。看起来很聪明但 SEO 和样式隔离都是坑这个方案我直接劝退。如果只是学习和交作业老老实实复制粘贴是最稳的。但要注意第一个页面写完 header 后把这段代码原封不动地粘到其他页面类名、结构、缩进都要一致。我一般在写完首页后先把 header 和 footer 复制给全部页面再开始写每个页面的主体内容这样后期统一改导航样式时至少还有 5 个文件是同步的。3.3 响应式断点怎么设移动端不乱的底线多页面站点很容易忽略响应式但如今绝大多数访问来自手机。我的底线要求是窗口拖到 375px 宽时内容不能横向溢出卡片必须变成单列。断点不用贪多三档足够断点对应设备布局策略≥1200px大屏桌面容器宽度 1140px卡片 3 列768px ~ 1199px平板容留 92% 宽度卡片 2 列≤767px手机卡片 1 列导航纵向排列核心代码不长但价值很高.container { width: min(1140px, 92%); margin-inline: auto; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } media (max-width: 991px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } media (max-width: 575px) { .services-grid { grid-template-columns: 1fr; } }width: min(1140px, 92%)是一个很好用的组合式写法意思是宽度在 1140px 和容器父级 92% 之间取较小的值省掉一个媒体查询去单独调容器宽度。导航的移动端适配很多人上来就要汉堡菜单。其实如果没有 JS纯 CSS 的汉堡菜单需要 checkbox 技巧结构略绕。想省事的话移动端直接让导航纵向排列并给导航项留足点击高度效果同样干净。等这个项目跑通了再去学汉堡菜单也不迟。3.4 细节打磨配色、渐变、阴影、圆角、字体和3D效果多页面站点最容易“显土”的地方就是视觉细节。我的经验是先定一套配色再定圆角、阴影、字体的统一规范最后才谈特效。这套项目我用的是模拟天津地域感的“海河蓝 津门金 浅灰底”但你把主题换成任何品牌色都成立:root { --primary: #1b6b93; --accent: #e6a23c; --bg: #f7f9fc; --text: #2b3440; }圆角要有梯度但别太乱小控件 8px卡片 16px大 hero 区域可以到 24px。阴影分三个层级常规元素用0 2px 8px rgba(0,0,0,0.04)卡片用0 8px 24px rgba(0,0,0,0.06)hover 或弹窗用0 16px 32px rgba(0,0,0,0.12)。层级统一后页面立刻有“设计过”的痕迹。字体渐变也是一个常见需求做标题很出效果.gradient-text { background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }文字溢出处理是卡片标题最常见的细节.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }两行省略可以用-webkit-line-clamp但要注意这段代码只支持 WebKit 内核浏览器苹果系浏览器没问题其他现代浏览器也基本兼容。最后说 3D。transform: rotateY(60deg) translateZ(300px)这个组合会让元素先绕 Y 轴转 60 度再沿它自己的 Z 轴往前移动 300px。因为 Y 轴转完后 Z 轴方向已经变了所以元素不是直着往前飘而是带着一个角度向前“探”视觉上会有一边放大一边缩小的立体感。前提是父容器必须设perspective不然translateZ在普通平面投影里根本看不出纵深。我的态度是可以玩但少用。卡片里大段正文一旦被 3D 旋转字就糊了与其炫技不如把间距和阴影做好。4. 完整实操流程从空文件夹到可交付站点4.1 先画线框图再写代码很多人一上手就打开编辑器敲代码敲到一半发现首页缺一个模块又回头加最后结构支离破碎。我的习惯是先画线框图哪怕只是拿一张纸画 5 个方框。每个页面的模块清单如下首页导航、hero、推荐卡片区、页脚。关于页页面标题、图文介绍、时间线、团队成员。服务页页面标题、服务卡片网格、价格表。联系页页面标题、表单、联系信息、地图占位图。登录页居中卡片、账号密码框、登录按钮。这一步的产出不是代码而是一张“内容地图”。之后写代码时你只需要对着地图填内容不会写着写着迷失方向。4.2 建目录、写公共样式按照前面给的目录结构创建文件和文件夹。然后写 common.css先放最简单的全局样式* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, -apple-system, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; }这里有一行很多人不在意但很关键的代码img { display: block; }。它是图片底部莫名多出 3px 空隙的最直接解药后面我会再讲。接着把 header 和 footer 的样式、按钮样式、容器样式都放进 common.css。这个文件是 5 个页面的地基地基稳了后面才不会返工。4.3 把5个页面的HTML骨架先铺完不要急着美化任何一页。先把 5 个页面的 HTML 结构写出来每个页面都引入 common.css 和自己对应的 CSS 文件导航栏和页脚完全一致只改当前页的 active 位置。这个阶段你就能用浏览器打开 index.html在 5 个页面之间跳来跳去。如果你发现某个链接跳不过去那就是相对路径写错了趁早修。每个页面头部的!DOCTYPE html、html langzh-CN、meta charsetUTF-8都要写对。特别是langzh-CN别小看它它影响浏览器默认的渲染模式和屏幕阅读器的语言判断。4.4 逐页补样式先首页后其他从首页开始把 hero、卡片、按钮样式一点点补上。每写完一个页面浏览器强制刷新一次而不是把所有页面都写完再统一看。这样出问题时你能立刻定位是哪个页面的样式而不是五个页面乱成一锅粥。写样式的顺序我推荐“从外到内”先布局再颜色再细节。比如写服务页卡片先定 grid 列数和间距确认卡片排布正常再写卡片的圆角、阴影、背景色最后加 hover 上移动效。如果你一上来就做 hover 动画布局还没调完动画效果也会跟着乱。4.5 响应式与细节收敛主体样式完成后开始拖窗口宽度。先拖到 1200px 以上确认大屏舒服再慢慢缩到 768px 左右看卡片是否自动变成两列最后拖到 375px确认没有横向滚动条、表单输入框没有溢出。这一步容易发现很多“桌面端完全看不出来”的问题比如三张卡片挤成一团、导航文字换行、图片爆出容器、表格溢出。我习惯给表格类内容包一层overflow-x: auto防止小屏下面表格把页面撑破。4.6 本地预览与打包交付强烈建议用 VS Code 的 Live Server 插件打开项目而不是直接双击 index.html。直接双击时浏览器走的是file://协议这个协议下浏览器对本地 CSS、本地 JS 有很多安全限制有时样式就是加载不出来还会在控制台报Access to CSS stylesheet at file:///... has been blocked之类的错。这不是你代码的问题换成本地静态服务器立即消失。交付时也记住把整个文件夹一起压缩别只发一个 html 文件。单独的 html 离开了 css 和 images就是一座毛坯房打开后会发现样式全丢、图片全裂。5. 常见问题与排查实录5.1 样式完全没生效先查路径再查缓存页面光秃秃没有样式80% 是 CSS 文件路径不对。如果你的 html 在根目录CSS 在 css 文件夹里那href就该是css/common.css不要写成./css/common.css之外的相对路径。如果确实没错再按顺序排查浏览器缓存、HTML 里是否写了互相覆盖的样式、选择器是否拼错。Windows 下尤其注意类名大小写CSS 选择器是区分大小写的.NavList和.navlist不是同一个东西。所以我建议养成一个好习惯每写一个 class 名HTML 和 CSS 两边都从同一个地方复制粘贴而不是各打一遍。5.2 IE11 打开样式崩了怎么办这个项目如果只是给自己或现代浏览器用户看IE11 兼容性可以不管。但如果你明确知道使用者有老浏览器就要提前取舍CSS 变量、grid、flex 的gap在 IE11 里都不可靠。解决方案是回退到具体颜色值、float 布局、用 margin 代替 gap。不用全盘兼容关键是“现代浏览器优先”这个决策要在项目开始时做而不是写完了才改。实际开发中我更倾向直接说“本项目建议使用 Chrome / Edge / Firefox 查看”把期望管理好反而省事。5.3 浮动塌陷父元素为什么没有高度浮动布局的经典问题父元素内部只有浮动子元素时父元素高度会被计算成 0背景和边框跟着塌陷。原因在于浮动元素脱离了文档流父元素不会自动把它们的高度算进去。解决方案有三种父元素加overflow: hidden、尾部加一个空元素并设置clear: both、或者用经典 clearfix.clearfix::after { content: ; display: block; clear: both; }我推荐第三种不污染结构。但更根本的建议是新项目不要用 float 做布局它已经完成了历史使命除了文字环绕和极老兼容需求其他场景请交给 flex 和 grid。5.4 图片底部出现空隙、图片变形图片底部多出 3px 左右的空隙是因为图片默认是行内元素它的底边要和文字基线对齐文字基线的下方还留着给下行字母的空间空隙就这么来的。解决方案就是设置img { display: block; }这也是我在 common.css 里直接写进去的原因。图片变形通常是固定了宽高但没限制图片比例。比如头像设了width:100px; height:100px原图却是 400x300默认情况下会被拉伸。这时加一行object-fit: cover就行了它会像“往相框里硬塞照片、多余部分裁掉”一样处理图片不变形只留中间区域。5.5 表单点击提交后页面就刷新纯静态站点没有后端接口表单默认提交会把当前页重新加载一遍输入内容全部清空看起来就像“坏了”。解决办法有两种一是让action指向一个成功提示页比如success.html这样至少有个完整流程二是把按钮改成typebutton彻底不触发提交但这只是“看起来不跳”并没有真正做任何事。我建议采用 action 指向成功页的方案因为它的体验是完整的用户填表、点提交、看到成功提示。虽然表单数据没有真正存到哪但作为一个前端静态站点演示已经足够交差。5.6 返回顶部按钮不生效用锚点做“一键返回顶部”很简单在body上设置idtop然后在页面里放a href#top返回顶部/a。如果body上没有这个 id锚点等于没有目标点了自然没反应。有些人会把href#top写在页脚处这没问题但记得每个页面都要在 body 上保留同一个 id。如果你希望滚动平滑一点在 CSS 里给 HTML 加一行scroll-behavior: smooth在不写一行 JS 的情况下锚点跳转就有顺滑动画。要控制返回速度那就需要一小段 JS 了这个项目不展开。我个人做完这类项目最大的体会是多页面站点的品质不在某一个页面有多炫而在 5 个页面是否像一个整体。目录规整、公共样式统一、导航不迷路、移动端不崩就已经超过大部分练手作品了。最后建议你每个页面写完都拖一下窗口宽度只看一眼 375px 下的效果很多将来要在手机上丢的脸都能提前收回来。希望这篇记录能让你少踩几个我当年踩过的坑。