前端之用HTML做一个汇款单

 例子

代码

里面注释是我我对运用到的知识的理解 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工商银行电子汇款单</title>
</head>
<body>
    <h3>工商银行电子汇款单</h3>
    <table border="1px" width="900px" cellspacing="0" cellpadding="0">
        <!-- 
            编写这个的思路可以以第一行为基准,然后根据实际情况,进行行列的合并。
            比如说在例子中下面的表格有两行在一行的第一列下面,那么第一行的第一
            列可以进行一下列的合并,合并两列。然后调整宽度,调整宽度只在第一行
            调整即可,只要下面的表格数量可以和你在第一行设置的表格数量相同,后
            面会自动对其。最后调整字体的居中问题
        -->
        <tr>
            <td colspan="2" width="100px"><b>回单类型</b></td>
            <td width="300px">网上转账汇款</td>
            <td colspan="2" width="100px"><b>指令序号</b></td>
            <td width="400px">HQH0000000000000013878172</td>
        </tr>

        <tr>
            <td rowspan="4" align="center" width="20px"><b>收款人</b></td>
            <td>户名</td>
            <td>老牟</td>
            <td rowspan="4" align="center" width="20px"><b>付款人</b></td>
            <td>户名</td>
            <td>老刘</td>
        </tr>
        <tr>
            <td><b>卡号</b></td>
            <td>0000000001</td>
            <td><b>卡号</b></td>
            <td>0000000002</td>
        </tr>
        <tr>
            <td>地点</b></td>
            <td>南京</td>
            <td>地点</td>
            <td>杭州</td>
        </tr>
        <tr>
                <td><b>网点</b></td>
                <td>工商江苏南京业务处理中心</td>
                <td><b>网点</b></td>
                <td>江苏徐州业务中心</td>
        </tr>
        <tr>
            <td colspan="2"><b>币种</b></td>
            <td>人民币</td>
            <td colspan="2"><b>钞汇标志</b></td>
            <td><u>钞票</u></td>
        </tr>
        <tr>
            <td colspan="2"><b>金额</b></td>
            <td>1.00元</td>
            <td colspan="2"><b>手续费</b></td>
            <td>0.57元</td>
        </tr>
        <tr>
            <td colspan="2"><b>合计</b></td>
            <td colspan="4">人民币(大写):壹元整</td>
        </tr>
        <tr>
            <td colspan="2"><b>交易时间</b></td>
            <td><i>2017年6月1日</i></td>
            <td colspan="2"><b>时间戳</b></td>
            <td><i>2017-06-01-13.00.00. 00000</i></td>
        </tr>
    </table>
    <p>票据打印时间:2017-06-01</p>
    <p><del>票据打印单位:江苏徐州业务中心</del></p>
    <p>操作员:大曾</p>
</body>
</html>

结果


不嫌弃的点点关注,点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚ 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/450457.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

docker学习进阶篇

一、dockerfile解析 官方文档&#xff1a; Dockerfile reference | Docker Docs 1.1、dockfile是什么&#xff1f; dockerfile是用来构建docker镜像的文本文件&#xff0c;由一条条构建镜像所需的指令和参数构成的脚本。 之前我们介绍过通过具体容器反射构建镜像(docker comm…

柚见第十一期(前端页面开发)

创建队伍 便于控制样式,在外面套一层div 创建假数据模拟后端传来数据 //假数据模拟 const initFormData { "name": "", "description": "", "expireTime": "", "maxNum": 0, "passwor…

基础小白快速Python---------时间日期

在Python中&#xff0c;time 模块提供了基本的时间相关功能。以下是一些常用的函数和方法&#xff1a; 1. time.time(): 返回自纪元&#xff08;1970年1月1日&#xff09;以来的秒数。 import time# 获取当前时间戳 current_time time.time() print(current_time) # 输出例如…

C++ 之LeetCode刷题记录(三十九)

&#x1f604;&#x1f60a;&#x1f606;&#x1f603;&#x1f604;&#x1f60a;&#x1f606;&#x1f603; 开始cpp刷题之旅。 目标&#xff1a;执行用时击败90%以上使用 C 的用户。 22. 括号生成 数字 n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用…

Node.js与Webpack笔记(二)

上一篇&#xff1a;Node.js与Webpack笔记&#xff08;一&#xff09;-CSDN博客 目录 Webpack模块打包工具 1.Webpack简介以及体验 2.Webpack的作用 4.体验Webpack 如果运行package.json里的自定义命令&#xff1f; Webpack 默认入口和出口&#xff1f; 入门使用 5.Webp…

centos7.9安装nacos

centos7.9安装nacos2.3.1 在centos x86_64环境安装nacos2.31环境准备 jdk1.8 、 mysql、 nacos 在window11环境安装nacos2.31 在centos x86_64环境安装nacos2.31 环境准备 jdk1.8 、 mysql、 nacos Nacos 依赖 Java 环境来运行。我们通过下载编译后压缩包方式安装。 重点踩坑…

Java微服务 第二十一章 Java多线程安全与锁

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 往期热门专栏回顾 专栏…

​​力矩电机的建模、仿真与选择

1 力矩电机建模 图1中 e i ( t ) {e_i}\left( t \right) ei​(t)为电机输入电压&#xff0c; L a {L_a} La​为电枢电感&#xff0c; R a {R_a} Ra​为电枢电阻&#xff0c; e m ( t ) {e_m}\left( t \right) em​(t)为电机工作时产生的反电动势&#xff0c; i a ( t ) {i_a}\l…

python爬虫(6)之处理数组

1、拆分数组 1、spilt&#xff08;&#xff09;函数 此函数的用处是将数组均分成几个数组 演示如下&#xff1a; import numpy as np ac np.array([1,2,8,9,3,5,5,8]) ac1 np.split(ac,2) ac2 np.split(ac,[3,6]) print(ac1,ac2) 结果如下&#xff1a; 其中若是一个数…

[java——基础] 双亲委派机制

目录 核心思想&#xff1a; 双亲委派机制的好处&#xff1a; 三种类加载器 解析源代码 双亲委派思想面试总结&#xff1a; 核心思想&#xff1a; 向上搜索&#xff0c;向下加载。 双亲委派机制的好处&#xff1a; 防止Java核心类被篡改&#xff0c;防止类的重复加载。 三…

力扣--动态规划/深度优先算法/回溯算法93.复原IP地址

这题主要用了动态规划和回溯算法。 动态规划数组初始化&#xff08;DP数组&#xff09;: 首先&#xff0c;创建一个二维数组dp&#xff0c;用于记录字符串中哪些部分是合法的IP地址。对字符串进行遍历&#xff0c;同时考虑每个可能的IP地址部分&#xff08;每部分由1到3个字符组…

基于深度学习的鱼类分类检测系统(含UI界面、yolov8、Python代码、数据集)

项目介绍 项目中所用到的算法模型和数据集等信息如下&#xff1a; 算法模型&#xff1a;     yolov8 yolov8主要包含以下几种创新&#xff1a;         1. 可以任意更换主干结构&#xff0c;支持几百种网络主干。 数据集&#xff1a;     网上下载的数据集&#x…

算法刷题day28

目录 引言一、截断数组二、双端队列三、日期统计 引言 这几道题是周赛里的几道题目&#xff0c;第一道题目我没用这种方法&#xff0c;但还是做出来了&#xff0c;用的一种比较特殊的思考方法&#xff0c;就是把每一个点都判断出来&#xff0c;不满足要求的就舍弃&#xff0c;…

【论文解读】多模态大语言模型综述

目录 一、简要介绍 二、概要 三、方法 3.1.多模态指令调整 3.1.1介绍 3.1.2初步研究 3.1.3模态对齐 3.1.4数据 3.1.5模态桥接 3.1.6评估 3.2多模态的上下文学习 3.3.多模态的思维链 3.3.1模态桥接 3.3.2学习范式 3.3.3链配置 3.3.4生成模式 3.4.LLM辅助视觉推理…

(golang)切片何时会创建新切片或影响原切片

什么时候切片操作会影响原切片 // 1.切片后没有触发slice的扩容机制时 什么时候对切片操作会创建新切片不影响原切片 // 2.对切片头元素进行截取的时候 // 3.当使用append时&#xff0c;len > cap则会触发扩容机制 前置&#xff1a; //slice结构体 type SliceHeader struct…

【你也能从零基础学会网站开发】Web建站之javascript入门篇 JavaScript事件处理

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;程序猿、设计师、技术分享 &#x1f40b; 希望大家多多支持, 我们一起学习和进步&#xff01; &#x1f3c5; 欢迎评论 ❤️点赞&#x1f4ac;评论 &#x1f4c2;收藏 &#x1f4c2;加关注 什么是DHTML …

宏工科技数智方案现先进陶瓷展,VR体验数字工厂引关注

3月6-8日&#xff0c;第十六届中国国际粉末冶金、硬质合金与先进陶瓷展览会在上海举行。本届展会&#xff0c;宏工科技股份有限公司携VR体验数字工厂和正负压气力输送系统惊艳亮相&#xff0c;“现实虚拟”的呈现方式收获众多行业客户及专业观众高度关注。 展会汇聚了来自粉末冶…

【Python】一文详细介绍 plt.rc_context() 在 Matplotlib 中的原理、作用、注意事项

【Python】一文详细介绍 plt.rc_context() 在 Matplotlib 中的原理、作用、注意事项 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&a…

在funtion中用分号间隔还是逗号间隔

问: 回答: 这段代码是一个Vue组件方法的实现&#xff0c;名为resetForm。该方法的主要作用是关闭一个对话框&#xff08;通过设置this.dialogFormVisible false&#xff09;&#xff0c;重置表单字段&#xff08;使用this.$refs[formName].resetFields();&#xff09;&#x…

动态规划课堂5-----子序列问题(动态规划 + 哈希表)

目录 引言&#xff1a; 例题1&#xff1a;最长递增子序列 例题2&#xff1a;最长定差子序列 例题3&#xff1a;最长的斐波那契子序列的长度 例题4&#xff1a;最长等差数列 例题5&#xff1a;等差数列划分II-子序列 结语&#xff1a; 引言&#xff1a; 要想解决子序列问…