
解题思路:
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>
---------------------------------------------------------------------------------------------------------------------------------
运行成果:
