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

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

下面来看看我用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>

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

Html + css 实现银行回执单页面相关推荐

Tailwind CSS如何单页面使用并压缩tailwindcss
tailwind的文档写的已经很全了,这里针对的是单页面构建不需要框架的对象创建文件夹初始化依赖包生成package.json 命令: npm init -y 安装必须品命令:npm insta ...
NC65 报销单使用银企直联网银支付后，银行的电子回执单的收款人开户行跟报销单的收款对象的开户行不一致
NC65 报销单使用银企直联网银支付后,银行的电子回执单的收款人开户行跟报销单的收款对象的开户行不一致,如下图: 解决方案:检查供应商的银行账户对应的联行号是否跟开户行对应.如果不对应,则需要修改为对 ...
前端的单页面模式和多页面模式
一.前言前端部分的搭建,需要考虑使用哪种模式进行页面之间的跳转交互, 而项目内的页面交互,不可避免的需要相互之间的数据共享. 这就引出了本篇博客的目的,一起来谈谈:项目前端部分的构建方式以及数据共享 ...
单页面与多页面的区别及优缺点
单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css.所有的页面内容都包含在这个所谓的主页面中.但在写的时候,还是会分开写(页面片段), ...
Bootstrap：关于bootstrap单页面中多Modal的问题
2019独角兽企业重金招聘Python工程师标准>>> 在单页面中新建用户采用modal而判断添加成功后还采用modal提示成功后右边的滚动条会出来俩条,覆盖整个body的阴影瞬间变 ...
app怎么嵌套vue页面_app内嵌vue单页面应用的一些坑
写这篇文章的原因是想总结一下自己最近开发的一个内嵌app的vue单页面项目,看看有哪些坑!!! 1.白屏项目第一次上线正常项目第二次上线,20多个用户反馈白屏(没见过这世面,心里慌的不行!!!), ...
详细解剖大型H5单页面应用的核心技术点
阐述下项目 Xut.js 开发中一个比较核心的优化技术点,这是一套平台代码,并非某一个插件功能或者框架可以直接拿来使用,核心代码大概是6万行左右(不包含任何插件) .这也并非一个开源项目,不能商业使用 ...
webpack 单页面应用实战
这篇文章将介绍如何利用 webpack 进行单页面应用的开发,算是我在实际开发中的一些心得和体会,在这里给大家做一个分享.webpack 的介绍这里就不多说了,可以直接去官网查看. 关于这个单页面应用 ...
单页面与多页面的区别与优缺点？
1.什么是单页面? 单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的html,js,css. 优点:用户体验好前后端分离页面效果会比较炫酷(比如切换页面内容 ...
web图片铺满网页_web单页面实现多个echarts图表铺满整个div(柱状图，折线图，饼形图……)...
[实例简介] 最近针对web端实现单页面展示多个echarts图表,更直观的展示数据的变化,响应式 [实例截图] [核心代码] charts └── charts ├── css │ ├── bo ...

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

Html + css 实现银行回执单页面相关推荐

最新文章

热门文章

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

Html + css 实现银行回执单 页面相关推荐

最新文章

热门文章

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

Html + css 实现银行回执单页面相关推荐