汇款单的完成

解题思路:

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>

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

运行成果:

相关推荐
半个落月11 小时前
LangSmith 全链路观测(下):用 Dataset 与 LLM Judge 量化评估 RA
javascript·langchain
半个落月11 小时前
LangSmith 全链路观测(上):用 LangGraph 与 Milvus 构建可追踪的 RAG 客服
javascript·langchain
Java后端的Ai之路12 小时前
06-React-Props
前端·react.js·前端框架
半个落月12 小时前
LangChain.js Agent 中间件实战:生命周期、动态工具与文件权限
javascript·langchain
Flynt12 小时前
开源"间谍卫星"说数据全是真的,我把它的免key数据源挨个试了一遍
前端·开源·数据可视化
Csvn13 小时前
渲染管线
前端
程序员大阳13 小时前
副队长CSS教程(33)–圆角与透明
前端·css·透明·圆角
志尊宝13 小时前
Vue3 零基础每日笔记(082):文件上传实战——el-upload 校验、自定义上传、头像预览
前端·javascript·vue.js·笔记·#javascript·#vue.js
鬼手点金13 小时前
opencode-rules 插件
java·开发语言·前端·人工智能·chrome·git·github
柳杉14 小时前
借助 Codex 和可视化工作流,从调研到完整实现,3D 大屏竟然可以这么简单
前端·ai编程·数据可视化