1. 页面绘制练习到底在练什么我先说个结论这个标题看起来简单但页面绘制练习1这类任务几乎是所有前端入门者最容易被低估的一个训练。你可能觉得无非就是把设计稿照着写出来但真正上手会发现同样一块区域有人半小时能还原到90%有人折腾一下午还在跟边距较劲。差别不在工具熟不熟练而在有没有一套稳定的观察方法和还原思路。页面绘制说白了就是把你眼睛看到的视觉稿转换成浏览器能识别的HTML结构加CSS样式。这个转换过程里藏着一堆隐性工作测量间距、识别层级、推算布局方式、判断哪些元素会用Flexbox、哪些用Grid还有哪些“看着居中但实际是padding撑出来的”视觉欺骗。所谓练习就是把这一套流程练成肌肉记忆。这个练习适合谁来参考如果你是刚开始学前端只懂标签和选择器的基本用法这个练习能帮你把零散知识串起来如果你已经能写点东西但每次还原度不高、细节总对不上这套方法同样管用——它训练的是“怎么看得准”和“怎么写得稳”。我个人的判断是页面绘制练习的第一课不是多写代码而是先学会拆解。拿到任何一个视觉稿哪怕只是一张截图先别急着写问自己三个问题这个页面由几大块组成每一块的布局方式是哪种哪些样式是可以复用的变量这三个问题想清楚了后面的代码基本就是填空。2. 动手前必须做好的准备从设计稿到实现方案这一步看起来没什么技术含量却是整个练习里最容易翻车的环节。很多人上来就写写到一半发现布局推倒重来就是因为没在开工前把设计稿“翻译”成实现方案。2.1 先给页面的区块画一张结构图所谓结构图不需要工具一张纸一支笔就行。把视觉稿从上到下拆成横向区块比如这个练习里常见的组合是顶部导航栏、主体内容区、底部信息区。每个区块里面再拆比如主体内容区可能是一张卡片列表卡片里面又有图片、标题、描述文字和按钮。拆的时候要特别注意嵌套关系。你在纸上画出来的每一层嵌套基本就对应着HTML里的一层div或其他语义化标签。常见问题是有人会把所有内容平铺在一个div里然后用一堆margin来微调位置结果越写越乱。正确做法是先定骨架再填血肉。骨架就是区块划分血肉是里面的具体内容。还有个细节值得提前确认整个页面是固定宽度还是响应式如果是固定宽度的练习那就在项目开始时把基准宽度定下来比如常见的1200px或1440px。如果是响应式就要先明确断点。我建议新手练习用固定宽度起步否则同时处理布局和适配两件事很容易哪件都做不好。2.2 布局选型Flexbox还是Grid不一定二选一很多教程会把Flexbox和Grid分开讲好像它们是两个互斥的方案。实际做页面绘制的时候两者通常是搭配使用的。我的经验是一维分布用Flex二维网格用Grid。怎么理解如果一个容器里的子元素是按一行或一列排列的那就是一维场景Flexbox最顺手如果同时要管行和列比如卡片网格那就是二维场景Grid更合适。以常见的卡片列表为例最外层用Grid设置grid-template-columns: repeat(4, 1fr)让四张卡片自动铺满一行而单张卡片内部的布局——图片居中、文字左对齐、按钮靠底部——用Flexbox从纵向排列就非常直观。这种组合几乎覆盖了大多数内容型页面的绘制需求。这里有个容易纠结的细节Flexbox里的gap属性。旧写法需要在每个子元素上加margin还要处理最后一个子元素多余的边距。现在主流浏览器都支持gap了直接写在容器上省事很多代码也干净。2.3 统一变量先从颜色和间距开始页面绘制练习里有个很值得养成的习惯把常用的样式值抽成CSS自定义属性也就是CSS变量。尤其是色值。你去看设计稿的时候可能觉得里面颜色很多但归类之后通常会落在几个主色、几个辅助色和几个中性色上面。比如常见的组合是主色用于按钮和链接辅助色用于标签或提示中性色用于背景和文字。把这个梳理出来在:root里定好变量名后面写样式的时候直接引用变量。好处是想换主题色的时候只需要改一个地方全页面都会跟着变。这对练习项目可能没什么但对真实项目来说是能救命的好习惯。间距同样建议变量化。很多人写间距全凭感觉一会儿用padding: 16px一会儿用margin: 20px页面看起来就会有点乱。设计里的间距体系通常是有节奏的基础间距定为8px然后按8的倍数递增16px、24px、32px这套体系称为间距刻度。用在线设计工具查看设计稿时你会发现间距基本都是8的倍数。练习时遵循这个规律页面的视觉一致性会好很多。3. 核心实操全过程从零到一写出一个完整页面说完了准备阶段我们直接进入代码。这个练习我以最常见的“导航栏 主体卡片区 页脚”结构为例全程使用原生HTML和CSS不引入任何框架。框架是工具但这个练习的重点是基本功用最基础的语法把布局写稳比依赖框架堆组件更能训练还原能力。3.1 打好全局基础Reset、根字号和变量声明老生常谈但还是得提不同浏览器自带的默认样式不太一样所以第一步通常要做一个“样式重置”。不一定要引入庞大的reset库普通的场景下写一段精简版的就可以* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; font-size: 14px; line-height: 1.6; color: #333; background-color: #f5f6fa; }这段代码里box-sizing: border-box可能是你最该记住的一行。它意味着padding和border会被算进元素的宽度里而不是额外的体积。没有这行的话设置一个宽度100%的盒子再套上左右padding盒子就直接溢出父容器了。新手遇到横向滚动条十有八九是这个原因。然后声明CSS变量。按设计稿的习惯先定颜色、字体大小和间距基准:root { --color-primary: #4a6cf7; --color-primary-hover: #3b5de7; --color-bg: #f5f6fa; --color-card-bg: #ffffff; --color-text: #1e293b; --color-text-secondary: #64748b; --color-border: #e2e8f0; --radius-md: 8px; --radius-lg: 12px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06); }这套变量不是为了炫技是让后面的CSS长得像填空一样有依据。每写一处样式能回到变量上去找对应的规则页面就会拥有统一性。3.2 导航栏Flex布局 固定定位的标准写法导航栏是整个页面的视觉定盘星。它的写法通常有两种一种是固定宽度居中另一种是通栏自适应。这次练习选择通栏自适应的做法撑满整个视口宽度内容再在内部做宽度约束。HTML结构header classnavbar div classnavbar-inner div classlogoLogo/div nav classnav-links a href# classnav-link active首页/a a href# classnav-link产品/a a href# classnav-link关于/a a href# classnav-link联系/a /nav a href# classbtn-primary开始使用/a /div /headerCSS部分.navbar { background-color: #fff; border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 100; } .navbar-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); height: 64px; display: flex; align-items: center; justify-content: space-between; } .nav-links { display: flex; gap: var(--space-lg); } .nav-link { text-decoration: none; color: var(--color-text-secondary); font-weight: 500; transition: color 0.2s ease; } .nav-link:hover { color: var(--color-primary); } .nav-link.active { color: var(--color-primary); font-weight: 600; }这里有两个要点。第一position: sticky比绝对固定fixed更符合导航栏的常见需求它一开始在页面正常位置滚动到顶部后“粘”在那里不会遮挡其他正常排版属于先文档流后固定。第二导航栏的内部容器用max-width margin: 0 auto实现居中同时让内边距撑出左右的呼吸空间浏览器窗口大于1200px时两侧自动留白小于时也不会挤压得贴边。如果你跟着写得比较细会注意到.logo我没有写额外样式。这种文本型logo给个font-weight加粗、字号加大点就行。如果设计稿上是图标加文字的logo那就用display: flex; align-items: center; gap: 8px来排列。核心是一样的。3.3 卡片网格Grid栅格 卡片内部Flex接下来是主体区域。假设设计稿上是一个四列卡片网格每张卡片里有图片、标题、摘要和一个按钮。HTML结构做成这样main classcontent section classhero h1页面绘制练习/h1 p这是基于设计稿还原的卡片网格布局练习模拟真实项目中最常见的页面结构。/p /section section classcard-grid article classcard img src./images/placeholder-1.jpg alt示例图片 div classcard-body h3卡片标题一/h3 p这是卡片描述文字通常用来说明这个功能或内容的核心价值一到两句话为宜。/p a href# classcard-btn了解更多/a /div /article !-- x 4 -- /section /mainCSS的核心部分是Grid容器.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); } .card { background-color: var(--color-card-bg); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } .card img { width: 100%; height: 180px; object-fit: cover; display: block; } .card-body { padding: var(--space-lg); display: flex; flex-direction: column; flex: 1; } .card-body h3 { font-size: 18px; margin-bottom: var(--space-sm); color: var(--color-text); } .card-body p { color: var(--color-text-secondary); margin-bottom: var(--space-md); flex: 1; } .card-btn { display: inline-block; padding: 8px 16px; background-color: var(--color-primary); color: #fff; border-radius: var(--radius-md); text-decoration: none; font-size: 14px; font-weight: 500; text-align: center; transition: background-color 0.2s ease; } .card-btn:hover { background-color: var(--color-primary-hover); }这里有几个值得展开讲的细节。第一个是flex: 1。在.card-body p上加了flex: 1作用是让描述文字撑满卡片中间的剩余空间把所有卡片的按钮顶到同一个水平线上。如果没有这行每张卡片标题和描述长度不一样按钮位置就会高高低低卡片看起来参差不齐。这是卡片布局里非常经典的技巧。第二个是overflow: hidden。它放在.card上配合图片用object-fit: cover能保证图片不管原尺寸多大都会被裁剪成指定宽高且不变形。如果你看到一张卡片里的图片被压瘪或拉长多半是没设object-fit: cover这是新手最容易漏掉的属性之一。第三个是transition。练习阶段就应该养成写交互动效的习惯。鼠标悬停时卡片轻微上浮视觉反馈不大但页面“质感”完全不同。这里只用了一个transform和box-shadow的变化性能开销小代码也简单性价比极高。3.4 页脚被低估的排版细节页脚通常被当成背景板随便写写但练习的意义恰恰在于把每个组件的写法定型。简单版本的页脚用三列footer classfooter div classfooter-inner div classfooter-col h4产品/h4 ul lia href#功能特性/a/li lia href#价格方案/a/li lia href#更新日志/a/li /ul /div div classfooter-col h4支持/h4 ul lia href#帮助中心/a/li lia href#社区论坛/a/li lia href#在线客服/a/li /ul /div div classfooter-col footer-copyright © 2024 页面绘制练习项目 /div /div /footer页脚的布局仍然是Flex一行分布列之间用space-between分隔。需要提醒的是页脚里的链接尽量去掉下划线但颜色要跟正文区分开同时保持可点击的视觉暗示。一个常见的处理.footer { background-color: #1e293b; color: #cbd5e1; margin-top: var(--space-xl); padding: var(--space-xl) 0; } .footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-lg); } .footer-col h4 { font-size: 16px; color: #fff; margin-bottom: var(--space-md); } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: var(--space-sm); } .footer-col a { color: #cbd5e1; text-decoration: none; } .footer-col a:hover { color: #fff; }.footer的margin-top很关键。练习里主体内容高度不足时页脚会直接顶到页面中间非常难看。这个margin可以把页脚推到合理位置。更专业的做法是用flex列布局让body变成最小高度100vh、页脚始终在底部但对练习来说先记住用margin托底就行。3.5 用Flex的Frameless思维做微调完成了上述部分整个页面的大框架已经完成了绝大多数。剩下的工作就是对着设计稿逐个像素级微调。这部分最考验耐心但也是提升最大的阶段。举个例子Hero区域的标题和描述文本设计稿上文字居中、间距较大通常会写成这样.hero { max-width: 600px; margin: 0 auto; text-align: center; padding: 64px 0 48px; } .hero h1 { font-size: 36px; font-weight: 700; margin-bottom: var(--space-md); } .hero p { font-size: 16px; color: var(--color-text-secondary); line-height: 1.7; }这里有两个细节第一标题字号用了没有变量化的36px因为它属于特殊场景不需要进入通用变量体系但如果页面里有多处类似级别的标题也可以把这个值抽成变量以避免不一致。第二line-height设到了1.7比正文的1.6略大不是为了好看而是段落文字更容易阅读设计稿里大段说明文字通常都会用稍大的行高。3.6 完整页面合并后的整体检查写完之后别急着收工做一次完整页面走查。建议按以下顺序过一遍在浏览器里按F12打开开发者工具切换到移动端模拟视图看看页面在窄屏下是否出现横向滚动。出现横向滚动绝大多数情况下是某个容器的宽度超出了父容器优先检查有没有设置宽度固定的元素。把固定宽度改成max-width或者加上overflow-x: hidden兜底。检查导航栏是否在滚动页面时保持在顶部卡片是否有正确的Hover效果。交互效果异常时检查transition写在哪个选择器上、是否有选择器优先级冲突。核对文字有没有溢出卡片的情况。比如太长的单词会把卡片撑破给卡片内文字加上word-break: break-word可以解决但这种预防措施知道比临时补救更从容。4. 常见问题与排查技巧实录写页面绘制练习的时候十个人里有九个会遇到下面这些问题。我把它们整理成一张速查表方便你对症下药。问题现象可能原因解决思路页面出现横向滚动条某一层级的宽度超出了视口检查是否有固定宽度大于父容器排查是否存在box-sizing缺失导致padding溢出导航栏不在顶部固定定位方式选错position: sticky需要设置一个top值才能生效必须加top: 0卡片图片被拉伸变形没设宽高比和裁剪模式设置固定高度加object-fit: cover宽度为100%让图片在容器内裁剪卡片按钮位置参差不齐卡片主体没有用flex扩展在卡片主体上使用flex: 1让文字区自动占据剩余空间按钮被顶到底部Flex或Grid的gap不生效将gap写在了子元素上gap属性必须写在容器父元素上不是子元素按钮里的文字换行按钮宽度不够给按钮加上white-space: nowrap或适当增加padding让文字不换行鼠标移上去没有效果选择器不匹配或transition没写好检查hover选择器是否连写正确例如.card:hover而不是.card: hover同时确认子元素的样式是否被父级优先级覆盖实际操作中我遇到最多的情况其实是“去掉预置样式”这一步没做干净。浏览器的默认样式会在你看不到的地方偷偷作怪ul的圆点、a的下划线、h1到h6的margin、button的背景色和边框。如果哪些地方看起来“总是差一点”先怀疑这些默认样式再用开发者工具点选查看实际计算出来的样式值而不是瞎调参数。还有一个经验写页面时元素的间距减少比增加容易增加比精准容易。什么意思就是说如果两个区块之间本来要30px的距离用margin-top给第二个区块设30px往往比你想用padding-top给第一个区块垫出30px更可靠。因为margin的处理不涉及内部内容的流动性padding却可能把背景色和边框意外撑大。这个原则应用到具体的页面项目里能有效减少很多返工。5. 练习进阶从静态还原走向项目级开发能力页面绘制练习做到这里你已经能独立还原一个完整的静态页面了。但真要走向实际项目开发还有几个坎需要跨过去。倒不是必须马上学框架而是有几个理念需要在练习期就建立起来。5.1 语义化标签比满屏的div更值得坚持在练习里用div确实省事但请尽量养成使用语义化标签的习惯header、nav、main、section、article、aside、footer。原因不只是SEO更实际的收益是代码可读性变强了你自己隔三天再看代码扫一眼结构马上能定位到对应模块团队协作时别人接手你的代码也不至于一头雾水。慢慢你会发现语义化标签还带了一层隐性好处它逼着你在动手前先思考这个区块到底是什么。是导航、内容还是补充信息想清楚了再写结构自然干净。5.2 响应式不该是加分项而是基本功练习里的固定宽度方案方便起步但真正上线的页面没有几个不用适配移动端的。就算练习项目我还是建议在完成固定布局后顺手加一段简单的媒体查询。先从断点开始常见的三档视口大于1200px保持四列卡片。视口在768到1200px之间卡片改成两列。视口小于768px卡片改成单列导航栏隐藏链接、显示一个简单的菜单按钮。代码层面的改动并不复杂难的是思维的转变从一开始就不该把页面宽度想成固定的而是想成“在当前视口下应该展示几列”。这个意识建立了后面的路会顺很多。5.3 组件的抽象与复用是一道分水岭你可能会发现练习里四张卡片的HTML结构几乎一样只是内容不同。新手可能直接复制粘贴四遍改一改里面的文字就行。但这么做暴露了一个问题当卡片变成12张甚至更多你还想在每张卡片上调整一个属性时纯复制粘贴会带来巨大的维护成本。实际的开发项目里我们会把这四张卡片提炼成一个“卡片组件”用一套模板通过数据渲染成多个实例。这个思想不一定马上要用代码实现但在练习中就应该意识到凡是重复出现的结构都要思考能不能一次定义、多处复用。拿着HTML/CSS基本功后续学React或Vue时只要把这种“组件化思想”迁移过去学习曲线会平缓非常多。5.4 通过DevTools调样式练习里最高频的行为整个练习过程中你一定会反复跟浏览器的开发者工具打交道。我这里分享一个特别想强调的操作方法修改样式时直接在DevTools的Styles面板里改不要每次改完代码就切回浏览器刷新。具体操作是打开DevTools后在Elements面板选中要调整的元素右侧Styles面板会列出它的所有CSS规则。你可以直接在每条规则后面点一下修改数值浏览器马上实时更新。等你调到满意了再把这行改动复制回编辑器。这比反复刷新页面效率高得多而且你能清楚地看到样式变化的过程。另外Elements面板其实比很多人以为的更强。比如你可以直接在元素上右键选择“Copy”下面的“Copy selector”就能得到一条精确匹配该元素的选择器或者在“Event Listeners”选项卡里看目标元素绑定了哪些事件。做一些页面调试时这些功能都会直接提升效率。6. 练习中那些没人提醒你、但特别真实的体验心得最后这部分我不打算画蛇添足地总结就想聊聊我做了很多次页面绘制练习之后的一些真实感受。最核心的体会是页面绘制的核心能力本质上不是写代码而是“观察的颗粒度”。同样一块内边距有人扫一眼就能估出大概16px还是24px有人只能试来试去。这种能力没有捷径就是在大量的练习里一点点磨出来的。我最初练习时对着设计稿量间距觉得特别费劲后来熟练了凭眼感判断的误差基本能控制在4px以内。到这个阶段你才算真正驾驭了这项基本功。另外我强烈建议你在练习过程中保存版本记录不用git那么复杂哪怕阶段性复制一份带日期的文件都可以。比如“20240601_finished_2col”和“20240602_finished_4col”。这对练习的意义在于当你后面学到新方法回头看旧版本能直观感受到自己进步在哪里。这种正反馈在自学的时候很珍贵。最后再分享一个小技巧。每次练习之前可以花两分钟做一个“预期设定”你觉得这一次大概需要多长时间难点会在哪一块想重点练什么技术点。练习结束后对照记录下来。这个方法听着很简单但对自学者来说能让你有意识地控制学习节奏而不是漫无目的地敲代码。哪怕只是写“这次要练习Pseudo Selector和Grid布局”练习本身就更有方向感。页面绘制练习这种看起来不起眼的小项目练到最后你会意识到它就是前端最底层的那块地基。做扎实了之后学什么框架都觉得有底气。