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>
好了,代码就这样了,希望能帮助到有同样需要的人,
智能推荐
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。(注意,输出结果中请不要返回参数中的节点引用,否则判题程序会直接返回空) 代码分析 这个递归的代码有问题,但不知道为什么牛客网的系统还可以通过。问...