第一次前端作业拿到“汇款单”这个题目时我心里想的是这不就是画一个表格嘛有什么难的。结果从动手到改完前前后后花了好几个晚上中间经历了无数个“为什么这里多了一像素”“为什么边框就是合不上”“为什么一输入文字输入框就撑破单元格”的抓狂时刻。回头再看这份作业其实特别适合做前端启蒙它把HTML结构、CSS布局、表单控件、文本对齐、盒模型这些最基础又最容易被忽略的细节全部揉在了一起。这篇文章就来完整复盘一下我做这张汇款单的全过程包括页面结构怎么搭、样式怎么写、踩了哪些坑、以及交作业前我会怎么自查。有必要先说明一点下面提到的汇款单内容是按传统纸质汇款凭单的常见信息项来设计的包括汇款人信息、收款人信息、金额大小写、币种、附言、日期这些字段。如果你拿到的作业模板字段不同整体思路照样可以套用只是把对应的单元格文字换掉而已。1. 动手写代码前我先把这张单子“拆”了一遍1.1 拆解信息结构汇款单到底有哪些内容块很多人拿到作业就急着打开编辑器开始写table我建议你先把纸质汇款单的排版和内容读明白。传统的汇款单本质上是一张有明确分区的信息采集表拆开来看其实只有四个块单据标题区比如“邮政汇款单”“银行汇款凭单”之类的主标题通常会配一个编号或条形码区域。汇款人信息区包括汇款人姓名、地址、邮编、联系电话等用于记录谁在汇款。收款人信息区包括收款人姓名、地址、邮编、开户行、账号等字段通常比汇款人区更细。金额与业务信息区币种、大写金额、小写金额、汇费、附言、日期、经办人签章等。我在纸上先把这些区域画出来标出每个区域需要几行几列、哪个字段比较长、哪个字段需要预留输入空间。这一步很多人嫌麻烦直接跳过但说实话80%的布局问题都是因为前期没想清楚“哪些字段在同一行、哪些字段必须换行”造成的。1.2 决定技术方案表格布局还是div模拟表格前端实现这种单据页面通常有两种思路一是用table标签做传统表格布局二是用div配合CSS模拟表格效果。我的第一版选了table后来重写时也试过div方案对比下来我的结论是第一次做作业老老实实用table反而更稳。原因是汇款单这种信息密集、行列对齐要求高的单据天然就是表格型数据。table的单元格会自动参与行列对齐不需要你用float或者flex去手动摆位置。div方案虽然能实现更灵活的响应式布局但对初学者来说光是处理“两列之间的空隙一致”“左侧字段宽度统一”这类问题就够喝一壶的。做作业不是炫技选一条最容易控制的路子把核心知识点掌握住比什么都强。不过这里有个前提如果作业明确要求不能用table、必须用div模拟那就另说。那种情况下建议用CSS的display: table系列属性来搭骨架也就是父元素设成display: table行设成table-row单元格设成table-cell这样能在不写table标签的前提下保留表格的对齐特性。2. HTML结构把一张纸质单据翻译成有语义的标签2.1 页面容器的搭建逻辑我先用一个最外层容器把整张汇款单“框”起来模拟纸张的效果。这个容器不需要什么花哨的样式宽度设置在700px左右加一个边框和一点内边距让页面看起来像一张摊开的单子。容器内部我按之前拆解的四个区域依次排列。标题区我用header包裹四个信息区域我用了section划分每个section里再放table。这样写的好处是结构层次清楚后期调试CSS的时候可以很快定位到“这块表格样式为什么没生效”对应的是哪一段代码。HTML结构代码大致是这样的div classremittance-form header classform-header h1汇款单/h1 span classform-no编号NO. 20240001/span /header section classform-section remitter-section h2汇款人信息/h2 !-- 汇款人表格 -- /section section classform-section payee-section h2收款人信息/h2 !-- 收款人表格 -- /section section classform-section amount-section h2金额信息/h2 !-- 金额表格 -- /section footer classform-footer !-- 附言、日期、签名等 -- /footer /div2.2 字段行的表格实现思路每个信息区域内部我用table来组织字段和输入控件。这里有一个非常重要的细节我一开始完全没注意到——table里的单元格数量和宽度必须保持一致。比如汇款人信息区有两行第一行是“姓名 输入框”第二行是“地址 输入框”那么两行的td数量要一样否则表格的列宽会被浏览器自动重新分配出现明显的错位。我以汇款人信息区为例结构大致是这样table classinfo-table tr td classfield-label汇款人姓名/td td classfield-inputinput typetext //td td classfield-label邮政编码/td td classfield-inputinput typetext //td /tr tr td classfield-label汇款人地址/td td classfield-input colspan3input typetext //td /tr /table第一行有4个单元格第二行用colspan3让地址输入框占满剩余三列这样两行的总宽度保持一致列宽也不会乱跳。这里我想提醒一句colspan是最容易被用错的属性它的作用是让一个单元格横向合并多个列前提是合并后这一行的总列数要和其他行一致否则表格会破版。2.3 金额大写的显示与输入框的搭配金额区域是汇款单里最有特点的部分。纸质单子上大写金额通常是固定的“壹贰叁肆伍陆柒捌玖拾佰仟万亿”这些字印在一排格子里需要填写的人在对应的空格里手动写字。到了Web页面里这种需求通常有两种处理方式第一种是做成一个带样式的只读文本区域用来显示自动转换后的大写金额适合有JS逻辑的进阶版本第二种是纯静态作业只画出一排格子不要求联动。我的第一次作业肯定是纯静态版本所以我把大写金额那一行做成了一个横向排列的单元格组每个格子用固定宽度的td实现里面不放输入框而是留出空白。这样既保留了纸质单子的视觉特征又不需要处理JS逻辑。小写金额则用一个普通的input放在表格里注意设置合适的宽度不要让输入框把单元格撑破。这里的宽度问题我在后面的踩坑部分会详细展开。3. CSS样式让页面不仅“结构对”还要“看起来像一张单子”3.1 边框合并与表格样式表格做出来的页面默认情况下每个单元格有自己的边框单元格之间会有空隙看起来是断开的。为了让汇款单更像一张完整打印的单据第一步就是把表格边框合并掉。.info-table { width: 100%; border-collapse: collapse; table-layout: fixed; }border-collapse: collapse的作用是让相邻单元格的边框合并成一条线而不是各自画一条然后中间空出距离。这一步不做后面所有边框线都是双线特别丑。table-layout: fixed也很关键它会让表格按照你设定的列宽来渲染而不是根据内容自动分配宽度。对表单类的密集表格来说fixed布局能极大减少列宽忽宽忽窄的问题。单元格内部的样式我也统一处理了.info-table td { border: 1px solid #333; padding: 6px 8px; height: 36px; font-size: 14px; line-height: 24px; }height和line-height一起设是为了让单元格里的文字垂直方向上有稳定的行距避免不同行之间的文字高低不齐。这一点很多人会漏掉但恰恰是“看起来专不专业”的分水岭。3.2 输入框怎么放进表格又不失控输入框放进表格最容易出现的问题就是“撑破单元格”。默认情况下input有一个内建的宽度和边框如果不做任何处理直接塞进td里一旦设置width: 100%就会把单元格的padding一起算进宽度导致盒子变宽撑破边框。我踩坑之后的做法是给所有放在表格里的input统一设置一个样式.info-table input[typetext] { width: 90%; border: none; border-bottom: 1px solid #ccc; padding: 2px 4px; box-sizing: border-box; background: transparent; outline: none; }这里三个要点第一box-sizing: border-box全局统一让宽度包含padding和边框从根本上解决溢出第二把input的边框去掉改成只保留下边框视觉上更像在单子上手写填写第三宽度不设100%而是90%给单元格内边距留出呼吸空间看起来不拥挤。如果你更想保留输入框的完整边框也可以不设border: none但一定要给input设一个小于100%的宽度比如95%然后配合box-sizing: border-box这样输入框和单元格边框之间会有一圈整齐的间距不会糊在一起。3.3 让文字对齐、垂直居中这些“不值一提”的小事前端作业里最磨人的往往是排版细节。文字对齐这块我总结了三个必查项单元格里文字的对齐方式默认情况下td里的文字是垂直居中的但水平方向是左对齐。字段标签和输入内容如果需要居中要显式设置text-align。标题区的上下间距h1和h2标签自带较大的margin在单据场景里通常要手动清零否则标题和表格之间会留出巨大空白。数字和金额的显示小写金额和编号建议统一用font-family: monospace来渲染数字看起来会更均称也更接近打印效果。如果作业允许多写一点样式我会把扫码区域的伪条码用letter-spacing配合细边框画出来效果很加分。这些细节单独看都不起眼但组合在一起就是“抄的作业”和“自己写的作业”之间的区别。3.4 页面整体配色与“纸质感”的处理汇款单本质上是正式单据配色不需要花哨。我用的方案是白底、深灰色文字、黑色边框背景用一个极浅的灰黄色来模拟纸张发旧的感觉。这个背景色我不会直接刷在整个body上而是只放在最外层容器里这样页面看起来更聚焦也更有“一张纸摊开”的层次感。再补一个经验做这类静态页面不要为了“好看”加太多圆角、阴影和渐变色。单据类页面的核心诉求是严肃、清晰、可读圆角一多就变成了卡片风格完全不搭。我第一次做完给懂行的朋友看他说了一句让我印象很深的话“你这页面单看每个地方都还行但整体不像是张单子像张请柬。”问题就出在圆角和阴影上。4. 第一次作业里最容易翻车的三个细节4.1 border-collapse 没生效表头行和内容行样式错位我第一次做完表格边框后发现最上面一行只有左右边框上下边框不见了怎么调都调不出来。检查了很久才发现我把边框样式写在了td上但表头行我用了th标签。th和td是两回事样式只写了td当然不生效。这里有两种修法一种是统一用td不用th另一种是CSS选择器写成.info-table th, .info-table td一起设。我后来选了第二种因为从语义角度讲字段名称用th更有意义对屏幕阅读器也更友好。作业里如果老师/导师要求语义化这个点就是加分项。还有一个相关的问题是border-collapse: collapse只对设置了border的元素之间生效如果某个单元格没有边框样式合并后就会出现“断线”的情况。排查时可以用浏览器开发者工具逐格检查看看是不是有td被意外覆盖了border: none。4.2 input撑破单元格盒模型没搞懂时的噩梦这个坑我印象太深了因为它的表象特别迷惑——输入框在光标没点进去之前看起来好好的一旦输入文字单元格就变宽整列都被挤动页面像被什么东西拱了一下。原因是input的默认宽度不是固定的而是基于size属性计算的输入内容变长时它可能自动扩展。最彻底的解决方法是给所有的input设定显式宽度并且加上box-sizing: border-box。我建议直接在项目开头写一条全局样式*, *::before, *::after { box-sizing: border-box; }这一条规则能救回无数个因为盒模型导致的溢出问题不只是这次作业以后做任何前端页面都适用。很多有经验的开发者会把这条样式当作默认配置来写说明它确实能省掉一堆排查时间。4.3 “看起来居中”其实没居中文字基线的问题单元格里的文字看起来是居中的用开发者工具一量发现垂直方向偏下了几个像素。这是因为默认的line-height在作怪。td和input的line-height如果不统一文字基线的位置就会不一样尤其是input里输入的文字和旁边的中文标签很容易出现视觉上的高低差。我的做法是给同一行里的td和input都设置相同的line-height和font-size比如td设line-height: 24pxinput也设line-height: 24px然后把vertical-align: middle加上。这样处理之后文字和输入框基本能保持在同一条水平线上。如果你发现还是差一点点可以微调input的margin-top或padding-top这种情况在像素级强迫症面前很常见习惯就好。5. 交作业前我会花十分钟做一轮自查5.1 结构层检查有没有多余的标签和不知所云的类名写作业的时候因为反复调试很容易留下一些没有实际作用的div、注释掉的代码、改了几轮却没删掉的类名。交作业前我会先用开发者工具整体扫一遍DOM树看到空标签、无样式的包裹层就删掉。类名我会统一检查一遍尽量用有语义的名字比如field-label、field-input、form-header这类而不是box1、box2、div3。这一步看起来是洁癖其实很实用——以后你要是回头改这个页面或者老师/导师要看代码语义化命名能省掉大量解释成本。我第一次作业时用了div1到div10这样的类名后来想改个样式都要先数半天哪个是哪个非常痛苦。5.2 样式层检查字体、对齐、边距有没有明显的不一致我会把页面缩放到50%和200%分别看一遍50%能看到整体布局有没有错位200%能看到细节字体、边框有没有毛边。再切换一次浏览器窗口宽度看页面是否依然以固定宽度居中显示。汇款单这种静态页面不需要做响应式但至少不能出现宽度超过屏幕导致横向滚动条的情况。还有一个很实用的技巧随手按一下F12在开发者工具里模拟手机尺寸看看效果。即便作业不要求移动端适配这一步也能暴露出一些桌面端看不出来的溢出问题。5.3 交互与语义层表单能不能通过键盘操作如果页面里放了很多input我会用Tab键把光标挨个过一遍看看焦点顺序是否自然。这一步能发现两个问题一是某个input被其他元素遮挡焦点看不见二是默认的focus样式还在不在。我个人的习惯是给input加一个简单的焦点样式比如border-bottom颜色加深这样既保持了视觉统一又保证了可用性。对第一次作业来说这个层次的要求不高但如果你想让页面看起来“用心”这就是加分项。毕竟前后端分离的作业页面最终是要给人用的不是只给浏览器看的。6. 如果我愿意多走一步加一点能提高完成度的东西6.1 打印样式让页面真正“可打印”汇款单天然就是用来打印填写的纸质单所以给页面写一份打印样式是一个非常讨巧的加分操作。只需要在CSS末尾加一段media print规则把背景色去掉、边框颜色加深、隐藏不需要打印的按钮或提示信息页面就会变成一张干净的可打印单据。media print { body { background: #fff; } .remittance-form { box-shadow: none; border: 2px solid #000; } }打印效果用浏览器的“打印预览”查看所见即所得。这一步花不了多长时间但能让作业的完成度明显上一个台阶也顺便提前接触了响应式里很重要的媒体查询知识。6.2 静态页里加一点渐进增强如果作业允许我可以不用JS就把大写金额区域做得更有“可填性”——比如给每个空白格子设置一个::before占位符或者用contenteditable属性让格子可以直接点击填写。这是一点小技巧但用到的时候注意contenteditable会让格子的样式在编辑时发生变化最好配一个focus样式保证用户体验。再进阶一点的方向是给页面补一个不等宽字体对齐的优化把所有数字和金额字段设置为等宽字体让多行数字在小数点处对齐。汇款单里如果有多个金额数字纵向排列这一点非常有效。6.3 代码注释和排版很多初学者写作业代码能跑就不管了其实代码本身的“可读性”也是作业评分的一部分。我会在几个关键部分加简单注释比如“汇款人信息区”“金额大写展示区”注释言简意赅不写废话。标签内部的缩进、引号、属性顺序也统一风格这些虽然不影响运行但能直接影响看代码的人对你的评价。我还会顺手把CSS里的重复值抽成变量或者公共类比如把border: 1px solid #333统一定义后面要调整时只改一处。第一次作业不要求用预处理器但抽公共类的习惯从一开始就可以养起来。最后说点实在的这份汇款单作业做完最大的收获不是学会了table和input而是明白了一个道理前端页面“看着简单”和“写着简单”完全是两码事。一张纸质的汇款单从信息分层、表格结构、边框合并、字体对齐到输入框的盒模型控制每一个环节都在考察你对基础知识的掌握程度。如果你正卡在这个作业的某个细节里出不来我建议你先放下编辑器找一张真的汇款单看看把它的信息分区和行列关系搞清楚再动手。很多时候问题不是不会写代码而是没想清楚要写什么。把结构理清楚代码其实是很自然的事。