20240309web前端_第一周作业_完成电子汇款单

作业二:完成电子汇款单

成果展示:

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工商银行电子汇款单</title>
</head>
<body>
    <h1>工商银行电子汇款单</h1>
    <table border="1px"  cellspacing="0px"
    width="60%">
        <tr align="left">
            <th colspan="2">回单类型</th>
            <!-- <td></td> -->
            <td>网上转账汇款</td>
            <th colspan="2">指令序号</th>
            <!-- <td></td> -->
            <td>HQH00000000000000138172</td>
        </tr>
        <tr align="left">
            <th rowspan="4" align="center">
                收<br>
                款<br>
                人<br>
            </th>
            <td>户名</td>
            <td>老牟</td>
            <th rowspan="4" align="center">
                付<br>
                款<br>
                人<br>
            </th>
            <td>户名</td>
            <td>老刘</td>
        </tr>
        <tr align="left">
            <!-- <td></td> -->
            <th>卡号</th>
            <td>000000000001</td>
            <!-- <td></td> -->
            <th>卡号</th>
            <td>000000000002</td>
        </tr>
        <tr align="left">
            <!-- <td></td> -->
            <td>地区</td>
            <td>南京</td>
            <!-- <td></td> -->
            <td>地区</td>
            <td>杭州</td>
        </tr>
        <tr align="left">
            <!-- <td></td> -->
            <th>网点</th>
            <td>工商江苏南京业务处理中心</td>
            <!-- <td></td> -->
            <th>网点</th>
            <td>江苏徐州业务中心</td>
        </tr>
        <tr align="left">
            <th colspan="2">币种</th>
            <!-- <td></td> -->
            <td>人民币</td>
            <th colspan="2">钞汇标志</th>
            <!-- <td></td> -->
            <td><u>钞票</u></td>
        </tr>
        <tr align="left">
            <th colspan="2">金额</th>
            <!-- <td></td> -->
            <td>1.00元</td>
            <th colspan="2">手续费</th>
            <!-- <td></td> -->
            <td>0.57元</td>
        </tr>
        <tr align="left">
            <th colspan="2">合计</th>
            <!-- <td></td> -->
            <td colspan="4">人民币(大写):<b>壹圆整</b></td>
            <!-- <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr align="left">
            <th colspan="2">交易时间</th>
            <!-- <td></td> -->
            <td><i>2017年6月1日</i></td>
            <th colspan="2">时间戳</th>
            <!-- <td></td> -->
            <td><i>2017-06-01-13.00.00, 00000</i></td>
        </tr>
    </table>
    <p>票据打印时间 : 2017-06-01 15:00:12</p>
    <p><s>票据打印单位 : 江苏徐州业务中心</s></p>
    操作员 : 大曾
</body>
</html>

解析:

汇款单主体使用table表格,先使用cellspacing定义表格的单元格之间的间距,使用border显示表格框线,width属性修改所属容器的占比,即表格宽度

    <table border="1px"  cellspacing="0px"
    width="60%">
</table>

内容部分:根据给出的示例图,使用align="left"将文字左对齐显示;colspan和rowspan分别进行表格的跨列和跨行合并。内部文字嵌套文字的各种格式化样式,b或strong文字加粗,u或ins添加下划线,s或del显示删除线,i或em斜体文字

文字加粗:

        <tr align="left">
            <th colspan="2">合计</th>
            <!-- <td></td> -->
            <td colspan="4">人民币(大写):<b>壹圆整</b></td>
            <!-- <td></td>
            <td></td>
            <td></td> -->  
        </tr>

 添加下划线:

        <tr align="left">
            <th colspan="2">币种</th>
            <!-- <td></td> -->
            <td>人民币</td>
            <th colspan="2">钞汇标志</th>
            <!-- <td></td> -->
            <td><u>钞票</u></td>
        </tr>

斜体文字:

        <tr align="left">
            <th colspan="2">交易时间</th>
            <!-- <td></td> -->
            <td><i>2017年6月1日</i></td>
            <th colspan="2">时间戳</th>
            <!-- <td></td> -->
            <td><i>2017-06-01-13.00.00, 00000</i></td>
        </tr>

文字加删除线:

    <p><s>票据打印单位 : 江苏徐州业务中心</s></p>

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

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

相关文章

【MatLab】之:Simulink安装

一、内容简介 本文介绍如何在 MatLab 中安装 Simulink 仿真工具包。 二、所需原材料 MatLab R2020b&#xff08;教学使用&#xff09; 三、安装步骤 1. 点击菜单中的“附加功能”&#xff0c;进入附加功能管理器&#xff1a; 2. 在左侧的“按类别筛选”下选择Using Simulin…

2024043期传足14场胜负前瞻

2024043期售止时间为3月17日&#xff08;周日&#xff09;21点30分&#xff0c;敬请留意&#xff1a; 本期深盘多&#xff0c;1.5以下赔率1场&#xff0c;1.5-2.0赔率7场&#xff0c;其他场次是平半盘、平盘。本期14场整体难度中等偏上。以下为基础盘前瞻&#xff0c;大家可根据…

深入浅出FISCO BCOS:区块链底层平台

苏泽 大家好 这里是苏泽 一个钟爱区块链技术的后端开发者 本篇专栏 ←持续记录本人自学两年走过无数弯路的智能合约学习笔记和经验总结 如果喜欢拜托三连支持~ 我前面有补充相关的区块链的知识 如果没有了解的话 可能部分概念或名词会不懂哦 建议先了解一波再来看~http://t.c…

kkview远程控制: 内网远程桌面控制软件

内网远程桌面控制软件&#xff1a;高效、安全的远程管理方案 在信息技术日新月异的今天&#xff0c;内网远程桌面控制软件已成为许多企业和个人用户不可或缺的工具。这类软件允许用户通过内部网络&#xff0c;实现对其他计算机的远程访问和控制&#xff0c;从而大大提高工作效…

ARM 寄存器学习:(一)arm多种模式下得寄存器

一.ARM7种状态以及每种状态的寄存器&#xff1a; ARM 处理器共有 7 种不同的处理器模式&#xff0c;在每一种处理器模式中可见的寄存器包括 15 个通用寄存器( R0~R14)、一个或两个(User和Sys不是异常模式&#xff0c;没有spsr寄存器)状态寄存器&#xff08;cpsr和spsr&…

环形链表2(C++), test ok

1. 题目 2. 思路分析&#xff1a; 与环形链表1一样&#xff0c;我们需要定义慢指针和快指针&#xff0c;确定链表是否有环&#xff0c;如果链表没有环的话&#xff0c;直接置空即可。如果链表有环&#xff0c;则需要向环形链表1一样&#xff0c;让快指针不断追赶慢指针&#x…

Python爬虫:原理与实战

引言 在当今的信息时代&#xff0c;互联网上的数据如同浩瀚的海洋&#xff0c;充满了无尽的宝藏。Python爬虫作为一种高效的数据抓取工具&#xff0c;能够帮助我们轻松地获取这些数据&#xff0c;并进行后续的分析和处理。本文将深入探讨Python爬虫的原理&#xff0c;并结合实战…

6.【Linux】进程间通信(管道命名管道||简易进程池||简易客户端服务端通信)

介绍 进程间通信的方式 1.Linux原生支持的管道----匿名和命名管道 2.System V-----共享内存、消息队列、信号量 3.Posix------多线程、网路通信 进程间通信目的 数据传输&#xff1a;一个进程需要将它的数据发送给另一个进程 资源共享&#xff1a;多个进程之间共享同样的资源。…

最大异或对(trie树)

题目描述&#xff1a; 思路&#xff1a; 1、首先此题我们要知道异或的规则&#xff0c;这里不赘述了&#xff0c;可以百度 2、如果利用trie树去找到一个数字与其异或能得到最大值 比如二进制数&#xff1a;1010.....是一个很大的数 我们想要异或得到的值更大&#xff0c;就需…

AST解web控制流平坦化

此代码可以解决大部分 while if else 控制流平坦化原理&#xff1a; 先将 if 语句转为 switch 语句&#xff0c;再将 switch 分支合并&#xff0c;最后删除已合并的分支&#xff08;具体看代码&#xff09; 实现效果图 首先安装依赖&#xff1a; npm install babel/parser npm…

分布式文件存储与数据缓存(一)| FastDFS

目录 分布式文件系统FastDFS概述_简介FastDFS特性&#xff1a;分布式文件服务提供商 FastDFS概述_核心概念trackerstorageclientgroup FastDFS概述_上传机制内部机制如下 FastDFS概述_下载机制内部机制如下 FastDFS环境搭建_Linux下载安装gcc下载安装FastDFS下载安装FastDFS依赖…

c语言的字符串函数详解

文章目录 前言一、strlen求字符串长度的函数二、字符串拷贝函数strcpy三、链接或追加字符串函数strcat四、字符串比较函数strcmp五、长度受限制字符函数六、找字符串2在字符串1中第一次出现的位置函数strstr七、字符串切割函数strtok&#xff08;可以切割分隔符&#xff09;八、…

THM学习笔记—RootMe

nmap扫描&#xff0c;发现22端口和80端口打开 dirsearch扫描&#xff0c;注意到/panel和/uploads&#xff0c;在浏览器中打开 可以上传文件&#xff0c;尝试反弹shell 在尝试过程中发现网站不能上传.php文件&#xff0c;只需要将后缀更改为.php5之类即可 成功 查找文件&#x…

页面事件

下拉刷新事件 1. 什么是下拉刷新 下拉刷新是移动端的专有名词&#xff0c;指的是通过手指在屏幕上的下拉滑动操作&#xff0c;从而重新加载页面数据的行为。 2. 启用下拉刷新 启用下拉刷新有两种方式&#xff1a; ① 全局开启下拉刷新  在 app.json 的 window 节点中&…

Docker常用命令的使用及镜像的构建

1.docker的好处 在开发中可能会遇到一个问题&#xff0c;一个程序在自己电脑上能跑&#xff0c;但是换到服务器上就不行了。如果我们重新搭建环境&#xff0c;需要重新部署mysql,es,redis等组件很麻烦。有了docker之后&#xff0c;我们可以快速完成项目的部署。同时docker的隔…

MyBatis3源码深度解析(十二)MyBatis的核心组件(一)Configuration

文章目录 第四章 MyBatis的核心组件4.1 使用MyBatis操作数据库4.2 MyBatis核心组件4.3 Configuration组件4.3.1 属性4.3.2 设置4.3.3 类型别名4.3.3 类型处理器4.3.5 对象工厂4.3.6 插件4.3.7 配置环境4.3.8 映射器 第四章 MyBatis的核心组件 4.1 使用MyBatis操作数据库 在研…

《操作系统实践-基于Linux应用与内核编程》第10章-Linux综合应用

前言: 内容参考《操作系统实践-基于Linux应用与内核编程》一书的示例代码和教材内容&#xff0c;所做的读书笔记。本文记录再这里按照书中示例做一遍代码编程实践加深对操作系统的理解。 引用: 《操作系统实践-基于Linux应用与内核编程》 作者&#xff1a;房胜、李旭健、黄…

网络通信与网络协议

网络编程是指利用计算机网络实现程序之间通信的一种编程方式。在网络编程中&#xff0c;程序需要通过网络协议(如 TCP/IP)来进行通信&#xff0c;以实现不同计算机之间的数据传输和共享。在网络编程中&#xff0c;通常有三个基本要素 IP 地址:定位网络中某台计算机端口号port:定…

Pyqt5中,QGroupBox组件标题字样(标题和内容样式分开设置)相对于解除继承

Python代码示例&#xff1a; import sys from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QGroupBox, QLabelclass MyApp(QWidget):def __init__(self):super().__init__()# 创建一个 QVBoxLayout 实例layout QVBoxLayout()# 创建 QGroupBox 实例self.grou…

【中等】保研/考研408机试-二叉树相关

目录 一、基本二叉树 1.1结构 1.2前序遍历&#xff08;注意三种遍历中Visit所在的位置&#xff09; 1.2中序遍历 1.3后序遍历 二、真题实战 2.1KY11 二叉树遍历&#xff08;清华大学复试上机题&#xff09;【较难】 2.2KY212 二叉树遍历二叉树遍历&#xff08;华中科技大…