汇款单的完成

解题思路:

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>

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

运行成果:

相关推荐
林小帅1 小时前
【笔记】OpenClaw 架构浅析
前端·agent
林小帅1 小时前
【笔记】OpenClaw 生态系统的多语言实现对比分析
前端·agent
程序猿的程1 小时前
开源一个 React 股票 K 线图组件,传个股票代码就能画图
前端·javascript
不爱说话郭德纲2 小时前
告别漫长的HbuilderX云打包排队!uni-app x 安卓本地打包保姆级教程(附白屏、包体积过大排坑指南)
android·前端·uni-app
大雨还洅下2 小时前
前端JS: 虚拟dom是什么? 原理? 优缺点?
javascript
唐叔在学习2 小时前
[前端特效] 左滑显示按钮的实现介绍
前端·javascript
用户5282290301803 小时前
【学习笔记】ECMAScript 词法环境全解析
前端
青青家的小灰灰3 小时前
React 架构进阶:自定义 Hooks 的高级设计模式与最佳实践
前端·react.js·前端框架
Angelial3 小时前
Vite 性能瓶颈排查标准流程
前端
不要秃头啊3 小时前
别再谈提效了:AI 时代的开发范式本质变了
前端·后端·程序员