汇款单的完成
2.封装整体内容，保证页面居中且样式隔离；.container （用到该命令）<table> （用到该命令）width（用到该命令）（ps：这里的%指代每个的占比行的大小）-- ps:该命令重点适应中文）-- ps:定义纸张和页面边距）-- ps:美化以及重置）-- ps:合并边框表格）-- ps:还原实线边框）-- ps:专属打印）-- ps:重置背景）-- ps:隐藏提示）-- ps:不分页）
解题思路：
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>
---------------------------------------------------------------------------------------------------------------------------------
运行成果：
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
13
0- 0
已为社区贡献1条内容
所有评论(0)