最近来了一个需求，需要去弄一个银行回执单页面，之前的业务需求是需要客户去手动上传银行回执单的，因为之前的业务是客户去一个一个的去上传，这样当数据多的时候，客户就提出来说需要进行批量去操作，这样子就不能去进行一个一个的上传这个银行回执凭证，他直会给我一些银行回执的信息，这样子我们保存下来后，就要给显示出来，这里我就只能去手动写一个页面出来了，下面来看看回执图片长啥样：

下面来看看我用html 加css 写的页面吧，细节大家可以在去调调，我这边只是用于后台展示就不弄的很细了，

大概我就做成这样了，接下来直接看代码吧：
div

<div class="body">
			<div class="body-center">
				<div class="body-title">
					<div>中国建设银行网上银行电子回执</div>
				</div>
				<div class="body-centes">
					<div>币种： 人民币元</div>
					<div>日期： 2020-06-08</div>
					<div>凭证： 12345554545</div>
					<div>账户明细编号-银行交易流水号：1234545646456456465465</div>
				</div>
				<table width="100%" border="1" cellpadding="0" cellspacing="0">
						<tr>
							<td rowspan="3" class="tdWhdth centess">
								付<br>款<br>人
							</td>
							<td class="tds tdWhdths centess">全称：苏州市博融商业保理有限公司</td>
							<td rowspan="3" class="tdWhdth centess">
								收<br>款<br>人
							</td>
							<td class="tds tdWhdths centess">全称：中国建设银行股份有限公司苏州工业园区支行营业部</td>
						</tr>
						<tr>
							<td class="tds tdWhdths centess">账号：32250198883600004564</td>
							<td class="tds tdWhdths centess">账号：中国建设银行股份有限公司苏州工业园区支行营业部</td>
						</tr>
						<tr>
							<td class="tds tdWhdths centess">开户行：中国建设银行股份有限公司苏州工业园区支行营业部</td>
							<td class="tds tdWhdths centess">开户行：中国建设银行股份有限公司苏州工业园区支行营业部</td>
						</tr>
						
				</table>
				<table width="100%" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
						<tr>
							<td class="tdpadding tdWhdth tds">大写金额</td>
							<td class="tdpadding tdWhdths tds">一百五十</td>
							<td class="tdpadding tdWhdth tds">小写金额</td>
							<td class="tdpadding tdWhdths tds">1211313</td>
						</tr>
						<tr>
							<td class="tdpadding tdWhdth tds">用途</td>
							<td class="tdpadding tdWhdths tds">商业险</td>
							<td class="tdpadding tdWhdth tds">钞汇标志</td>
							<td class="tdpadding tdWhdths tds">钞</td>
						</tr>
						<tr>
							<td class="tdpadding tdWhdth tds">摘要</td>
							<td colspan="3" class="tdpadding tdWhdths tds">网络转账</td>
						</tr>
				</table>
				<div class="tds names">重要提示：银行受理成功，本回执不作为收,付款交易的最终依据，正式回单请在交易成功第二日打印</div>
			</div>
		</div>

css

	<style type="text/css">
			.body{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.body-center{
				width: 1160px;
				border: 1px solid  #62A7E3;
			}
			.body-title{
				border: 1px solid #C5D7E8;
				justify-content: center;
				align-items: center;
				display: flex;
				background-color: #F7FBFE;
				color: #2C2C2C;
				font-weight: 600;
				height: 34px;
				font-size: 14px;
			}
			.body-centes{
			/* 	border: 1px solid #C5D7E8; */
				height: 34px;
				display: flex;
				justify-content:space-around;
				align-items: center;
				font-size: 12px;
			}
			table{
				border: 1px solid  #C5D7E8;
				border-collapse:collapse;
			}
			.tds{
				height: 34px;
				font-size: 14px;
			}
			.centess{
				text-align: center;
			}
			.tdpadding{
				padding-left: 8px;
			}
			.tdWhdth{
				width: 8%;
			}
			.tdWhdths{
				width: 41%;
			}
			.names{
				display: flex;
				align-items: center;
				color: #FF0000;
			}
		</style>

好了，代码就这样了，希望能帮助到有同样需要的人，