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

作业二：完成电子汇款单

成果展示:

完整代码：


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>
            <th colspan="2">指令序号th>
            
            <td>HQH00000000000000138172td>
        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">
            
            <th>卡号th>
            <td>000000000001td>
            
            <th>卡号th>
            <td>000000000002td>
        tr>
        <tr align="left">
            
            <td>地区td>
            <td>南京td>
            
            <td>地区td>
            <td>杭州td>
        tr>
        <tr align="left">
            
            <th>网点th>
            <td>工商江苏南京业务处理中心td>
            
            <th>网点th>
            <td>江苏徐州业务中心td>
        tr>
        <tr align="left">
            <th colspan="2">币种th>
            
            <td>人民币td>
            <th colspan="2">钞汇标志th>
            
            <td><u>钞票u>td>
        tr>
        <tr align="left">
            <th colspan="2">金额th>
            
            <td>1.00元td>
            <th colspan="2">手续费th>
            
            <td>0.57元td>
        tr>
        <tr align="left">
            <th colspan="2">合计th>
            
            <td colspan="4">人民币（大写）：<b>壹圆整b>td>
            
        tr>
        <tr align="left">
            <th colspan="2">交易时间th>
            
            <td><i>2017年6月1日i>td>
            <th colspan="2">时间戳th>
            
            <td><i>2017-06-01-13.00.00, 00000i>td>
        tr>
    table>
    <p>票据打印时间 : 2017-06-01 15:00:12p>
    <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 colspan="4">人民币（大写）：<b>壹圆整b>td>
              
        tr>

添加下划线：


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

斜体文字：


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

文字加删除线：

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

相关阅读:
JavaScript-promise使用+状态
 西电计科院微机原理与系统设计课程笔记（车向泉版）
在使用npm安装插件时，npm报错ERESOLVE
Java-基础语法
 [普通物理] 光栅衍射
 Linux环境修改服务器时间和网络时间保持一致
 呆头鹅-全自动视频混剪，批量剪辑批量剪视频，探店带货系统，精细化顺序混剪，故事影视解说，视频处理大全，精细化顺序混剪，多场景裂变，多视频混剪
 QT Android环境搭建及解决“Platfrom tools installed”等系列配置问题( 附QT、JDK、SDK、NDK网盘链接 )
找不到msvcp120.dll怎么办？msvcp120.dll修复方法分享！
稀碎从零算法笔记Day55-LeetCode:100291. 统计特殊字母的数量 II
原文地址：https://blog.csdn.net/weixin_73921499/article/details/136628565