汇款单的完成

解题思路:

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>

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

运行成果:

相关推荐
程序员Agions17 分钟前
useMemo、useCallback、React.memo,可能真的要删了
前端·react.js
echoVic17 分钟前
AI Agent 安全权限设计:blade-code 的 5 种权限模式与三级控制
java·javascript
David凉宸19 分钟前
Vue 3 + TS + Vite + Pinia vs Vue 2 + JS + Webpack + Vuex:对比分析
javascript·vue.js·webpack
滕青山19 分钟前
Vue项目BMI计算器技术实现
前端·vue.js
子兮曰23 分钟前
深入浏览器指纹:Canvas、WebGL、Audio是如何暴露你的身份的?
前端·浏览器·canvas
月亮补丁25 分钟前
AntiGravity只能生成 1:1 图片?一招破解尺寸限制
前端
何中应30 分钟前
MindMap部署
前端·node.js
boooooooom30 分钟前
Pinia必学4大核心API:$patch/$reset/$subscribe/$onAction,用法封神!
javascript·vue.js·面试
NAGNIP32 分钟前
程序员效率翻倍的快捷键大全!
前端·后端·程序员
一个网络学徒36 分钟前
python5
java·服务器·前端