Html + css 实现银行回执单 页面

标签:  JAVA

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

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

版权声明:本文为qrn196789910原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/qrn196789910/article/details/106634624

智能推荐

css+html5简单注册页面实现

最终效果图: 背景图片好不容易找到个高清的,结果放上去的时候就失帧了,我也很难受0.0  ...

HTML+CSS实现动态背景登录页面

实现背景图片的动态变换 首先我们把背景图片插入进去,在HTML页面body板块中,添加几个图片div 好了,图片已经插入进去了,那么现在就要对图片修饰。为了使图片能足够大覆盖页面,则div中可以有 background-size: cover;满足你的需求。而下面一步,则是最重要的环节–css动画的设计(在div class=”bgk”中进行) 动画设计好了以后...

Java高级之反射

“在反射之下,一段Java程序也变得无所遁形。探索框架的精髓——反射”   什么是反射 Java的反射(reflection)机制是指在程序的运行状态中,可以构造任意一个类的对象,可以了解任意一个对象所属的类,可以了解任意一个类的成员变量和方法,可以调用任意一个对象的属性和方法。这种动态获取程序信息以及动态调用对象的功能称为Java语言的反...

快速生成Plugman中的"lib-file"、"source-file"的xml内容

目录结果: 工具类: 结果:...

Vue.js入门学习--列表渲染--v-for遍历数组生成元素(四)

完整案列demo: 一、遍历数组 (1)DOM (2)数据模板 v-for指令相当于C#中的foreach,Java中的加强for,格式:item in items,items为数组或者集合,item为遍历数组或集合时取出的单个对象,当然,vue也支持取出对象所在的位置index,也就是(item,index) in items,注意参数的顺序不要搞错了! (3)显示 二、遍历对象(map),以键...

猜你喜欢

堆排序

堆排序 什么是堆? 堆是具有以下性质的完全二叉树: 每个结点的值都大于或等于其左右孩子结点的值,称为大顶堆 或者每个结点的值都小于或等于其左右孩子结点的值,称为小顶堆。 如下图所示: 那么话又说回来了,什么是完全二叉树呢? 要想知道什么是完全二叉树,首先得知道什么满二叉树。 满二叉树:高度为h,并且由 2^h-1个结点的二叉树,被称为满二叉树,其实不难看出,满二叉树的结点的度要么为0(叶子结点),...

一些必须知道的JAVA基础知识

作为一名Android开发人员,面试的时候也会经常被问到一些java基础方面的。这就前段时间面试中遇到的一些java方面的,可能不全,只是我面试中遇到的。 写这篇博客只是为了自己在以后的面试中(虽然现在上班了)不要在被同样的问题难到,以后还会持续更新。 1. ArrayList 和 LinkedList: 1.两者是是集合,不同的是内部的数据结构和实现原理有所不同。ArrayList内部是数组结构...

tp5.1框架学习之请求学习

获取请求参数 第一种方式:门面方式获取数据   方式二:依赖注入方式获取 方式三:辅助函数input获取(推荐  理由 比较简单,不用引入)   参数绑定 上面是参数绑定?   依赖注入概念的理解 依赖注入是一种软件设计思想,在传统软件中,上层代码依赖于下层代码,当下层代码有所改动时,上层代码也要相应进行改动,因此维护成本较高。 而依赖注入原则的思想是,上层...

深度学习库 caffe使用 源码分析 依赖库分析 caffe glog gflags openBlas prototxt yolo_darknet 转 caffe

深度学习库 caffe使用 源码分析 依赖库分析 caffe glog gflags openBlas 本文github链接 yolo_darknet 转 caffe caffe 安装 Caffe代码解析 caffe网络模型结构在线可视化 CAFFE使用 源码分析等 caffe 模型配置文件 prototxt 详解 caffe.proto 系统变量层类型参数配置文件 caffe_简介_使用.md ...

【Python学习-二叉树-链表】【剑指offer】之复杂链表的复制

【Python学习-二叉树-链表】【剑指offer】之复杂链表的复制 复杂链表的复制 代码分析 复杂链表的复制 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head。(注意,输出结果中请不要返回参数中的节点引用,否则判题程序会直接返回空) 代码分析 这个递归的代码有问题,但不知道为什么牛客网的系统还可以通过。问...

代办银行转账凭条银川订制汇款回执单揭阳订制银行柜台转账凭证江门银行回执单哪家比较好荆州定期存单代办泉州定做转账回执单中山转账小票定制长沙ATM转账回执单小票多少钱福州代办手机银行电子回单宜昌定做转账小票镇江开汇款凭条济宁银行汇款凭条图片徐州办转账小票福州转账小票宁波定做银行转账凭条昆明开ATM转账凭条滁州银行汇款凭条打印宜昌办ATM转账凭条宁德银行回执单柳州汇款凭条代做包头转账凭条费用南通银行转账回执单公司代办手机银行转账凭证常德手机银行转账凭证珠海汇款凭条办理洛阳银行转账回执单哪家好南宁ATM汇款转账小票代办烟台银行转账凭条代开铜陵开具银行转账小票邯郸转账回执单模板苏州银行柜台转账凭证哪家好网友称在豆瓣酱里吃出老鼠头英媒称团队夜以继日筹划王妃复出不负春光新的一天从800个哈欠开始歼20紧急升空逼退外机近3万元金手镯仅含足金十克罗斯否认插足凯特王妃婚姻重庆警方辟谣“男子杀人焚尸”月嫂回应掌掴婴儿是在赶虫子春分繁花正当时呼北高速交通事故已致14人死亡杨洋拄拐现身医院男孩疑遭霸凌 家长讨说法被踢出群国产伟哥去年销售近13亿充个话费竟沦为间接洗钱工具有个姐真把千机伞做出来了俄方确认海军总司令已被撤换淀粉肠小王子日销售额涨超10倍因自嘲式简历走红的教授更新简介男子给前妻转账 现任妻子起诉要回大学生哥哥攒钱带妹妹全国旅行网友建议重庆地铁不准乘客携带菜筐#春分立蛋大挑战#清明节放假3天调休1天19岁小伙救下5人后溺亡 多方发声青海通报栏杆断裂小学生跌落住进ICU单亲妈妈陷入热恋 14岁儿子报警开除党籍5年后 原水城县长再被查代拍被何赛飞拿着魔杖追着打殡仪馆花卉高于市场价3倍还重复用315晚会后胖东来又人满为患了两大学生合买彩票中奖一人不认账张家界的山上“长”满了韩国人?倪萍分享减重40斤方法为江西彩礼“减负”的“试婚人”专家建议不必谈骨泥色变张立群任西安交通大学校长男孩8年未见母亲被告知被遗忘网友洛杉矶偶遇贾玲武汉大学樱花即将进入盛花期遭遇山火的松茸之乡山西省委原副书记商黎光被逮捕医院:呼北高速车祸伤者多为骨折特朗普谈“凯特王妃P图照”手机成瘾是影响睡眠质量重要因素春分刮大风真的一直刮到四月中吗小米汽车超级工厂正式揭幕王树国3次鞠躬告别西交大师生房客欠租失踪 房东直发愁男子持台球杆殴打2名女店员被抓

代办银行转账凭条 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化