汇款单的完成

解题思路:

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>

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

运行成果:

相关推荐
ℋᙚᵐⁱᒻᵉ鲸落3 小时前
移动端滑动手势冲突:overflow: auto导致外层横向滑动失效
前端·javascript·css·vue.js·html
默_笙4 小时前
🎃 前端学了 Next.js,后端该学啥?NestJS 就是 Node 版的蜜雪冰城
前端·javascript
前端snow5 小时前
ai agent --- 实现 openclaw 定时间效果
前端
码云之上5 小时前
换模型之后,Chatbot 为什么要自己做 compact?
前端·agent·前端工程化
এ慕ོ冬℘゜5 小时前
navigator 导航对象 BOM制作方法
javascript
星栈6 小时前
自定义 UI-UX-Pro-Max 的 CSV 知识库,把 AI 生成的后台拉回行业该有的样子
前端·agent·weui
研☆香6 小时前
简单的图片上传 删除 预览
前端
ITresearchGuest6 小时前
我用 AI 一小时写了一个世界杯数据可视化平台|前端 VibeCoding 初体验
前端·人工智能·信息可视化
慧一居士7 小时前
Vite项目中使用Less步骤,详细使用示例
前端·css
花间相见7 小时前
【LangChain组件03】—— LangChain Agents 执行与状态:工作流程与状态管理实战
java·前端·langchain