页面绘制练习全攻略：前端布局与CSS还原技巧

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 class="navbar"> <div class="navbar-inner"> <div class="logo">Logo</div> <nav class="nav-links"> <a href="#" class="nav-link active">首页</a> <a href="#" class="nav-link">产品</a> <a href="#" class="nav-link">关于</a> <a href="#" class="nav-link">联系</a> </nav> <a href="#" class="btn-primary">开始使用</a> </div> </header>

CSS部分：

.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 class="content"> <section class="hero"> <h1>页面绘制练习</h1> <p>这是基于设计稿还原的卡片网格布局练习，模拟真实项目中最常见的页面结构。</p> </section> <section class="card-grid"> <article class="card"> <img src="./images/placeholder-1.jpg" alt="示例图片"> <div class="card-body"> <h3>卡片标题一</h3> <p>这是卡片描述文字，通常用来说明这个功能或内容的核心价值，一到两句话为宜。</p> <a href="#" class="card-btn">了解更多</a> </div> </article> <!-- x 4 --> </section> </main>

CSS的核心部分是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 class="footer"> <div class="footer-inner"> <div class="footer-col"> <h4>产品</h4> <ul> <li><a href="#">功能特性</a></li> <li><a href="#">价格方案</a></li> <li><a href="#">更新日志</a></li> </ul> </div> <div class="footer-col"> <h4>支持</h4> <ul> <li><a href="#">帮助中心</a></li> <li><a href="#">社区论坛</a></li> <li><a href="#">在线客服</a></li> </ul> </div> <div class="footer-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. 常见问题与排查技巧实录

写页面绘制练习的时候，十个人里有九个会遇到下面这些问题。我把它们整理成一张速查表，方便你对症下药。

实际操作中，我遇到最多的情况其实是“去掉预置样式”这一步没做干净。浏览器的默认样式会在你看不到的地方偷偷作怪：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布局”，练习本身就更有方向感。

页面绘制练习这种看起来不起眼的小项目，练到最后你会意识到，它就是前端最底层的那块地基。做扎实了，之后学什么框架都觉得有底气。