★ FEATURED ARTICLE 上学时做的第一个像样的网页作业就是这份银行汇款单。当时觉得不就是画个表格、填几个输入框嘛真动手才发现越看着简单的页面越考验基本功。汇款单这玩意儿信息密度高、对齐要求严格、表单控件类型多还要考虑打印出来的效果几乎把HTML表单和CSS布局的核心知识点都覆盖了一遍。这篇文章就把我当时做这个作业的完整过程拆开讲一遍从页面结构设计、样式实现到打印适配、问题排查把能想到的坑和技巧都写出来给同样在学网页制作的朋友一个可以直接照着抄的参考。1. 整体设计与思路拆解1.1 这个作业到底在练什么银行汇款单这个题目从教学角度来说选得非常聪明。它不是让你做个花里胡哨的官网首页而是逼着你去处理真实业务场景中最常见的一类页面——单据类页面。这类页面的特点是信息密集、字段固定、格式严谨跟门户网站、电商首页那种自由发挥的路子完全不同。我当时拆解这个需求时首先搞清楚汇款单上到底有哪些信息块。一张标准的银行汇款单通常包含汇款人信息姓名、账号、开户行、收款人信息姓名、账号、开户行、汇款金额大小写、汇款用途、日期、签字确认区等。把这些字段梳理清楚页面结构的大框架就出来了。这个项目的核心价值在于它逼着你掌握三样东西一是表格和表单元素的熟练运用二是CSS对尺寸、对齐、间距的精细控制三是理解页面做出来只是第一步打印出来得能用这种工程化思维。这三样东西放到真实的前端开发中一样都跑不掉。1.2 为什么坚持用纯HTML和CSS做这个作业之前我刚接触了Bootstrap也试过用它快速搭页面。但最后我还是决定不用任何框架完全用手写HTML和CSS来实现。原因有两个第一这种单据页面的样式非常特殊框架的栅格系统和预设组件反而会成为束缚很多细节需要自己写样式才能精确控制第二也是更重要的——这种作业的意义就在于把基本功打牢用框架把表格和表单封装好确实快了但浏览器默认样式表现、表单控件的对齐方式、表格边框合并规则这些底层逻辑你永远都不会真正理解。实际做下来验证了这个判断。汇款单这种页面用到的CSS技术点非常典型表格边框合并、单元格内边距控制、文本对齐、输入框宽度与表格列宽的匹配、打印样式适配。每一个点都值得手动写一遍踩过坑才能记得住。等你以后真的进了企业用Vue、React做后台管理系统的单据页面时这些基本功全是高频使用的。1.3 页面结构规划按照汇款单的业务逻辑我把页面从上到下分成四个区域单据标题区包括银行名称、单据名称汇款单、单据编号、日期栏。这一块要居中、醒目同时要给后续填写的日期留出明确的位置。汇款信息区这是核心区域用表格布局。左半边是汇款人信息右半边是收款人信息。每一列前面是标签文字如户名账号开户银行后面是空的输入框或填写线。金额与用途区包含汇款金额大写、小写、汇款用途。这个区域需要特殊处理金额大写要用专门的格子或横线小写金额要有¥符号前缀用途一般给一个下拉选择或直接留空线。签字与备注区底部通常是汇款人签字经办人复核等字段加上银行受理章的占位区域。这样的结构划分既符合真实单据的阅读习惯也方便后续写CSS时分块控制样式。2. 表单细节与样式实现要点2.1 HTML结构中使用哪些标签更合理做单据页面选对标签很重要。我看到很多同学做这类作业上来就是一堆div套div到后面想调整对齐全靠margin和padding硬怼改一个地方崩三处。这种做法不是不行但不够聪明。我推荐的结构是整个单据主体用table来搭建。为什么因为汇款单本身就是一个信息对齐要求极高的表格型布局表格的语义化和对齐特性天然适合。可能有人说表格布局已经过时了但那是针对整个页面布局而言——复杂响应式页面确实不应该用大表格套小表格但单据、报表这类固定格式数据展示表格依然是最高效的标签。不过要特别注意表格里不适合直接放交互输入控件。汇款单上的填写项我用的是两种方案一种是输入框直接嵌在表格单元格里适合账号、金额这种需要精确输入的内容另一种是单元格底部画一条横线适合签字、日期这种手写内容。这两种方案混合使用页面看起来会更像真实的单据。整体HTML骨架大致如下table classremit-sheet thead tr th colspan4XX银行汇款单回单/th /tr tr th业务类型/th td colspan3 input typeradio namebizType idnormal checkedlabel fornormal普通汇款/label input typeradio namebizType idurgentlabel forurgent加急汇款/label /td /tr /thead tbody tr td classlabel-cell汇款人/td tdinput typetext placeholder户名/td td classlabel-cell收款人/td tdinput typetext placeholder户名/td /tr !-- 其他行类似 -- /tbody /table核心思路就一句话表格负责搭骨架、管对齐输入框负责收数据两者分工明确谁也别抢谁的活。2.2 输入框与表格列宽的对齐技巧做这种页面最大的坑我个人觉得是输入框宽度和表格列宽对不齐。输入框默认有边框和padding直接放进表格里会出现溢出、错位甚至把表格撑破。这个问题我调了很久最后总结出三个关键点第一给表格设置border-collapse: collapse。这是表格布局的老规矩了合并相邻单元格的边框避免出现双线边框整个页面看起来干净很多。这个属性应该在写样式一开始就加上别等到最后发现边框粗了才想起来。第二给输入框设置box-sizing: border-box。这是解决撑破表格的最有效手段。正常情况下输入框的宽度是content-box计算的也就是说你设了width: 90%实际占用的宽度还会额外加上border和padding。改成border-box后宽度会包含border和padding怎么设都不会溢出。第三别让输入框宽度是固定的px值用百分比。我最初把每个输入框设成固定宽度比如200px结果在窄一点的浏览器窗口里直接错位。后来统一改成百分比宽度配合单元格的padding就能自动适应不同宽度的窗口。.remit-sheet input[typetext], .remit-sheet select { width: 90%; box-sizing: border-box; border: 1px solid #aaa; border-radius: 0; padding: 4px 8px; }这里有个细节为什么设90%而不是100%从视觉上说输入框两边留一点空隙不会紧贴着单元格边框整体更像手写单据上的空格比较透气。这个比例你可以根据具体设计调整80%到95%之间都能接受。2.3 边框、底色与字形的一致性处理单据页面要给人一种正式、清晰的感觉最忌讳的是各种元素风格混搭。我当时踩过的一个典型问题是表格边框默认是黑色的细线输入框边框也是黑色但浏览器默认的输入框边框在不同系统下渲染效果不一样有的发灰、有的发蓝整个页面看起来就不统一。后来我做了三件事来统一视觉一是把所有边框统一设置为#aaa的浅灰色而不是纯黑。纯黑边框在页面上太突兀浅灰看起来更现代而且打印出来也不会显得脏。二是给标签列加浅底色。汇款人和收款人信息区我用#f5f5f5给标签单元格加了背景色让标签和填写区一眼就能区分页面层次感马上就不一样。三是统一字体。中文单据页面正文用系统默认的宋体、微软雅黑都行但一定要明确指定。我当时用的是body { font-family: Microsoft YaHei, PingFang SC, Helvetica Neue, Arial, sans-serif; }需要注意的是单号、金额这类数字信息可以单独用font-family指定数字字体比如Consolas、monospace这样数字看起来更规整对齐也更好。2.4 金额大写的特殊处理汇款单上的金额大写壹、贰、叁、肆、伍、陆、柒、捌、玖、拾等是这类单据的标志性元素。处理方式有两种一种是放一个文本输入框让用户自己输入大写金额另一种是做成一个个独立的小格子每个格子填一个字。我当时的作业选了第二种用一行多个小格子来展示大写金额每个格子自带底部横线。这样视觉上更接近真实单据做起来也更有意思。实现方式也不复杂div classamount-upper span¥/span span classamount-box/span span classamount-box/span span classamount-box/span !-- 若干个格子 -- span角/span span classamount-box/span span分/span /div每个amount-box设成一个固定宽度的inline-block底部画一条横线里面是空的看起来就是等待填写大写金额的空位。这种处理方式能让页面细节丰富很多老师看到也会觉得你是动了脑子的。3. 实操过程与关键代码实现3.1 从页面骨架到样式填充的实操顺序做这种图文并茂、信息量又大的页面实操顺序很重要。按照先结构、再样式、后细节的顺序来能少走很多弯路。我第一版是边写HTML边写CSS结果改到后面自己都乱了因为结构没定样式全是白改。第二次重做才理顺了流程第一步先把完整的HTML结构写出来。包括所有的表格行、列、输入框、下拉框、单选按钮全部按业务逻辑放好宁可字段多一些也不能漏。这一步不追求好看只追求信息完整和结构清晰。第二步把页面分成直观的大块先保证大块的布局正确。比如标题区居中了没有、汇款人和收款人是不是左右分列、金额区是不是独立成块。这时候可以用临时的背景色来辅助调试看每个区块占的位置是否符合预期。第三步再往细了调。表格边框、单元格内边距、输入框宽度、字体大小、颜色这些细节在结构稳定之后再做效果会好很多也不容易返工。第四步做打印适配和浏览器兼容性检查。这一步很多人会忽略但对单据页面来说非常关键我放在后面专门讲。3.2 完整页面代码示例下面是我当时最终版的HTML代码去掉了具体银行名称只保留结构和样式这样你们改起来可以直接套自己学校的作业要求。一点一点来看!DOCTYPE html html langzh-CN head meta charsetUTF-8 title银行汇款单/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, PingFang SC, Helvetica Neue, Arial, sans-serif; background: #f0f2f5; padding: 30px; } .sheet { width: 900px; margin: 0 auto; background: #fff; border: 1px solid #aaa; padding: 30px 35px; } .sheet-title { text-align: center; font-size: 26px; font-weight: bold; letter-spacing: 8px; margin-bottom: 20px; } .sheet-meta { display: flex; justify-content: flex-end; margin-bottom: 15px; font-size: 14px; color: #333; } .sheet-meta span { margin-left: 12px; } .remit-table { width: 100%; border-collapse: collapse; margin-bottom: 0; } .remit-table td, .remit-table th { border: 1px solid #aaa; padding: 10px 12px; font-size: 14px; } .label-cell { width: 14%; background: #f5f5f5; font-weight: bold; text-align: center; white-space: nowrap; } .content-cell { width: 36%; position: relative; } .content-cell input[typetext] { width: 100%; border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; outline: none; } .content-cell input[typetext]:focus { border-color: #3b7cff; } .amount-box { display: inline-block; width: 40px; height: 30px; line-height: 30px; text-align: center; font-size: 18px; border-bottom: 1px solid #333; margin: 0 2px; } /style /head body div classsheet h1 classsheet-title银 行 汇 款 单/h1 div classsheet-meta span编号input typetext stylewidth: 120px;/span span日期input typetext stylewidth: 140px;/span /div table classremit-table tr td classlabel-cell汇款人/td td classcontent-cell 户名input typetext placeholder请输入户名 /td td classlabel-cell收款人/td td classcontent-cell 户名input typetext placeholder请输入户名 /td /tr !-- 其他行按需补充 -- /table /div /body /html这段代码里有几个细节值得展开说一下第一tr为什么没有包在tbody里实际上HTML解析器会自动把裸tr放进tbody里。写代码时我为了方便阅读没有显式加tbody但如果你们交作业建议还是写清楚thead、tbody结构语义更完整万一后续要加表头分组也更方便。第二为什么标题用了letter-spacing: 8px中文标题银行汇款单五个字加了字间距之后视觉上更舒展也更像正式单证的标题样式。这是个很小的细节但很起作用首页标题如果挤成一团整个页面的气质就垮了。第三焦点边框颜色为什么要改输入框获得焦点时边框变成蓝色这是浏览器默认行为。我特意用:focus伪类统一成了#3b7cff这个蓝色更柔和跟页面整体风格也更搭。3.3 页面区域划分与触屏适配我第一版做完之后在手机浏览器里打开看了看结果输入框挤成一团表格变形严重。虽然老师评分未必会拿手机打开但这让我意识到一个问题——纯固定宽度的表格在窄屏设备上体验确实不行。针对这个情况我做了一个基础的响应式处理在视口宽度小于768px时让表格区域变成纵向堆叠。具体做法是通过媒体查询把表格单元格变成块级元素输入框宽度调整成100%media screen and (max-width: 768px) { .sheet, .remit-table { width: 100%; } .remit-table td { display: block; width: 100% !important; text-align: left; } .label-cell { text-align: left; background: #fafafa; } }这个方案虽然算不上优雅但对于难度不高的作业来说完全够用而且能体现你有响应式布局的意识。需要注意一点display: block会破坏表格的语义所以这种响应式做法只建议在窄屏场景使用打印或宽屏时还是保持表格原样。4. 打印适配与浏览器兼容性4.1 打印样式从哪个属性开始做前面提到了web页面pdf打印这个热搜词其实银行汇款单这类单据页面打印需求是天然存在的所以在开发时就要考虑打印适配。当用户选择打印时直接用默认样式打出来的页面通常会有几个问题背景色丢失、宽度溢出、分页位置不受控制。我在这块的做法分三步第一步用media print定义打印专用样式这是最基础也是最重要的一步。在这个媒体查询里我清除了页面的背景色和阴影把.sheet的外边框和阴影去掉确保打印时无多余墨迹。media print { body { background: #fff; padding: 0; } .sheet { width: 100%; border: none; padding: 0; } .label-cell { background: #fff !important; } .amount-box { border-bottom-color: #000; } }第二步处理分页。如果汇款单内容过长打印时会被自动分成多页但分页位置如果落在表格中间会很丑。通过page-break-inside: avoid可以尽量避免这种情况。.remit-table tr { page-break-inside: avoid; }第三步做好打印预览。浏览器有打印预览功能可以把打印样式产生的结果可视化。我当时是把页面调整到合适宽度后按CtrlP或者CmdP打开打印预览边看边调整样式比盲写高效得多。4.2 不同浏览器下页面表现差异怎么处理做网页的人永远躲不掉的坑就是不同浏览器的默认样式差异。德育上最典型的问题有三个问题一input元素的默认宽度。在没设置width时不同浏览器的输入框默认宽度不一样有的二十几个字符有的三十几个。解决办法也很简单就是给所有输入框都显式设置宽度不要依赖默认值。问题二表单元素的字体继承。很多表单控件是不继承页面font-family的不管你在body里设了什么字体输入框、下拉框都用自己的默认字体。你们以后做项目一定会遇到这个问题。解决办法是显式指定input, select, button, textarea { font-family: inherit; font-size: inherit; }问题三占位符文本的样式。placeholder在不同浏览器中颜色不一样如果想统一可以设置::placeholder伪元素样式同时兼顾::-webkit-input-placeholder这类浏览器前缀。这个做不做看你要不要抠这个细节对作业来说影响不大但练一遍没坏处。4.3 浏览器兼容性的完整检查清单为了让页面在Chrome、Edge、Firefox、Safari这几个主流、甚至常见的国产双核浏览器上不出岔子我整理了一份自检清单。每项检查的时候就用浏览器打开本地文件过一遍表格类检查表格边框是否显示正常、border-collapse是否生效、单元格内边距是否一致。表单类检查输入框宽度是否与单元格匹配、点击后焦点样式是否显示、radio是否可正常选中、placeholder颜色是否符合预期。布局类检查页面是否水平居中、标题是否居中、边距是否统一、响应式是否生效、打印预览是否正常。如果某个浏览器下有偏差先定位是默认样式差异还是自己的样式写法问题再对症下药。像box-sizing: border-box这种就建议统一放在全局样式里一次性把所有元素的盒子模型统一省得后面每个元素都要单独处理。5. 常见问题与排查技巧5.1 高频问题速查表这部分把实际写代码时最常遇到的问题整理成了一张速查表方便你们遇到问题直接查问题现象常见原因处理方式输入框宽度不对称百分比宽度与单元格padding冲突给所有输入框设置box-sizing: border-box并统一宽度或百分比表格边框变双线或样式不一致相邻单元格边框重复使用border-collapse: collapse合并边框输入框内容顶到边框未设置内边距给输入框加padding: 6px 10px页面在窄屏下溢出表格固定宽度超出视口用媒体查询改成纵向堆叠布局宽度设为100%打印时背景色消失浏览器默认不打印背景颜色不强求打印背景或通过-webkit-print-color-adjust: exact尝试保留多数场合不建议标签与输入框竖向不对齐表格单元格行高不同设置单元格统一line-height输入框统一高度小写金额“¥”显示为乱码字符编码不匹配检查页面是否为UTF-8编码或者在HTML中正确使用html实体5.2 排查思路Step by Step如果遇到问题别急着改代码按这个顺序排查第一步检查HTML结构是否闭合正常。很多时候样式错乱是因为少写了一个闭合标签。用浏览器的开发者工具F12看DOM结构有没有非预期的嵌套或层级漂移一目了然。第二步检查CSS选择器是否命中目标。右键点击要排查的元素 - 检查看右侧样式面板里有没有命中的规则以及哪些样式被划上了删除线。如果规则一栏是空的说明选择器没写对。第三步查看盒子模型。在开发者工具的Computed计算样式面板里可以直观看到元素的margin、border、padding实际占用情况。之前输入框溢出表格的问题我就是在这个面板里发现width计算方式不对的。第四步对比浏览器差异。如果在一台电脑上正常、另一台异常大概率是浏览器版本或系统字体原因。在这种场景下可以把Chrome DevTools切换成手机模拟模式看看是不是响应式做得不够。这套排查流程代码写多了之后几乎是肌肉记忆新手刚开始可能觉得慢但养成这个习惯以后写任何前端页面都能少走很多冤枉路。5.3 几个实操心得补充最后补充几个这个项目前后摸索出来的实操心得可能文档里不会写但实际做的时候很有用心得一做表单页面先写出完整的HTML结构再开始写CSS。我第一版就是边写HTML边写CSS结果反复调整结构、反复改样式效率极低。后来重做时先按完整结构写出所有表格行和输入框再开始写样式整个过程顺畅得多。心得二不要过早精细化样式。我一开始就抠字体、抠颜色、抠间距结果布局改一次就要连带调一遍样式。后来学乖了先用最简单的样式比如所有边框都设为1px红色把布局确认下来最后再统一美化反而省了不少时间。心得三尽量多写注释。像这样代码量不算大的作业很多同学会觉得注释没必要。但实际上交上去的作业老师会看代码有注释说明你对每个部分的理解分数会有明显差距。我当时的页面结构就写了标题区汇款人信息收款人信息金额区签字区这类注释清晰、直观老师改代码也轻松。心得四手里保留一份打印版样式。单据页面打印是刚需哪怕老师没要求打印把打印适配做出来也能体现你的考虑周全。而且这类页面的打印样式套路是通用的以后再做发票、快递单、报名表之类的页面直接改改参数就能用。我个人做这个作业印象最深的一点是它让我第一次意识到写代码和完成项目之间的距离。光是把HTML标签堆出来并不难难的是把所有细节理顺——边框统一、对齐统一、打印可用、跨浏览器不崩。这个页面做完之后再做其他带表单的页面无论是布局方式还是调试手段心里都踏实了很多。你们做的时候别嫌它简单把每个细节抠明白后面可以少踩很多坑。
阅读完成 · 觉得有帮助？
