汇款单的完成

解题思路:

1)当拿到上图时间,我们首先要注意该代码的逻辑结构:

1.实现汇款单核心数据的行列布局:

<table> (用到该命令)

2.封装整体内容,保证页面居中且样式隔离;底部辅助信息:

.container (用到该命令)

3.给表格单元格定比例:

width (用到该命令)

代码如下:

---------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<title>浦发银行电子汇款单</title>

<style>

body {

font-family: "SimHei", "Microsoft YaHei", sans-serif; (!-- ps:该命令重点适应中文)

margin: 20px;

background-color: #f5f5f5;

}

.container {

max-width: 800px;(!-- ps:限宽)

margin: 0 auto;(!-- ps:居中)

background-color: #fff;

padding: 20px;

box-shadow: 0 0 5px rgba(0,0,0,0.1);(!-- ps:美化以及重置)

}

h1 {

text-align: center;

font-size: 24px;

margin-bottom: 20px;

font-weight: bold;

}

table {

border-collapse: collapse;(!-- ps:合并边框表格)

width: 100%;

margin-bottom: 15px;

page-break-inside: avoid;(!-- ps:不分页)

}

table, th, td {

border: 1px solid #000;(!-- ps:还原实线边框)

}

th, td {

padding: 8px 10px;

font-size: 14px;

line-height: 1.5;

}

.info-row {

font-size: 14px;

margin: 8px 0;

text-align: left;

}

.info-row .label {

margin-right: 8px;

white-space: nowrap;

}

@media print {(!-- ps:专属打印)

body {

background-color: #fff;(!-- ps:重置背景)

margin: 0;

padding: 0;

}

.container {

width: 100%;

padding: 0;

margin: 0;

box-shadow: none;(!-- ps:去阴影)

}

@page {(!-- ps:定义纸张和页面边距)

margin: 1.5cm;

size: A4;

}

.no-print {(!-- ps:隐藏提示)

display: none;

}

}

</style>

</head>

<body>

<div class="container">

<h1>浦发银行电子汇款单</h1>

<table>

<tr>

<td width="10%">回单类型</td>

<td width="25%">网上转账汇款</td>

<td width="10%">指令序号</td>

<td width="55%">XLYH000000000000000000001</td>(ps:这里的%指代每个的占比行的大小)

</tr>

<tr>

<td rowspan="4" width="10%">收款人</td>

<td width="25%">户名:小兰</td>

<td rowspan="4" width="10%">付款人</td>

<td width="55%">户名:小帅</td>

</tr>

<tr>

<td>卡号:000000000001</td>

<td>卡号:000000000002</td>

</tr>

<tr>

<td>地区:桂林</td>

<td>地区:南宁</td>

</tr>

<tr>

<td>网点:浦发广西桂林业务处理中心</td>

<td>网点:广西桂林业务中心</td>

</tr>

<tr>

<td width="10%">币种</td>

<td width="25%">人民币</td>

<td width="10%">钞汇标志</td>

<td width="55%">钞票</td>

</tr>

<tr>

<td width="10%">金额</td>

<td width="25%">1000000.00元</td>

<td width="10%">手续费</td>

<td width="55%">666元</td>

</tr>

<tr>

<td width="10%">合计</td>

<td colspan="3" width="90%">人民币(大写):壹佰万元整</td>

</tr>

<tr>

<td width="10%">交易时间</td>

<td width="25%">2026年1月14日</td>

<td width="10%">时间戳</td>

<td width="55%">2026-01-14-18.00.00, 00000</td>

</tr>

</table>

<div class="info-row">票据打印时间:2026-01-14 18:00:12</div>

<div class="info-row">票据打印单位:广西桂林业务中心</div>

<div class="info-row">操作员:小棋</div>

<div class="info-row no-print" style="margin-top: 20px; color: #666;">

小兰的温馨提示:按下 Ctrl+P 即可打印此汇款单

</div>

</div>

</body>

</html>

---------------------------------------------------------------------------------------------------------------------------------

运行成果:

相关推荐
Lsx_2 小时前
案例+图解带你遨游 Canvas 2D绘图 Fabric.js🔥🔥(5W+字)
前端·javascript·canvas
2501_944521002 小时前
rn_for_openharmony商城项目app实战-主题设置实现
javascript·数据库·react native·react.js·ecmascript
m0_471199632 小时前
【场景】如何快速接手一个前端项目
前端·vue.js·react.js
榴莲CC3 小时前
抗干扰LED数显屏驱动VK1624 数码管显示芯片 3线串行接口
前端
lili-felicity3 小时前
React Native for Harmony 个人消息列表最新消息置顶实现(多维度权重统计)
javascript·react native·react.js
Tigger3 小时前
用 Vue 3 做了一套年会抽奖工具,顺便踩了些坑
前端·javascript·vue.js
天天扭码3 小时前
一文搞懂——React 19到底更新了什么
前端·react.js·前端框架
weixin_462446233 小时前
【原创】使用langchain与MCP 与 Chrome DevTools 打造可调用浏览器工具的 Chat Agent
前端·langchain·chrome devtools
OpenTiny社区3 小时前
OpenTiny 2025年度贡献者榜单正式公布~
前端·javascript·vue.js