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

    作业二：完成电子汇款单

    成果展示:

    完整代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>工商银行电子汇款单title>
    7. head>
    8. <body>
    9.     <h1>工商银行电子汇款单h1>
    10.     <table border="1px"  cellspacing="0px"
    11.     width="60%">
    12.         <tr align="left">
    13.             <th colspan="2">回单类型th>
    14.             
    15.             <td>网上转账汇款td>
    16.             <th colspan="2">指令序号th>
    17.             
    18.             <td>HQH00000000000000138172td>
    19.         tr>
    20.         <tr align="left">
    21.             <th rowspan="4" align="center">
    22.                 收<br>
    23.                 款<br>
    24.                 人<br>
    25.             th>
    26.             <td>户名td>
    27.             <td>老牟td>
    28.             <th rowspan="4" align="center">
    29.                 付<br>
    30.                 款<br>
    31.                 人<br>
    32.             th>
    33.             <td>户名td>
    34.             <td>老刘td>
    35.         tr>
    36.         <tr align="left">
    37.             
    38.             <th>卡号th>
    39.             <td>000000000001td>
    40.             
    41.             <th>卡号th>
    42.             <td>000000000002td>
    43.         tr>
    44.         <tr align="left">
    45.             
    46.             <td>地区td>
    47.             <td>南京td>
    48.             
    49.             <td>地区td>
    50.             <td>杭州td>
    51.         tr>
    52.         <tr align="left">
    53.             
    54.             <th>网点th>
    55.             <td>工商江苏南京业务处理中心td>
    56.             
    57.             <th>网点th>
    58.             <td>江苏徐州业务中心td>
    59.         tr>
    60.         <tr align="left">
    61.             <th colspan="2">币种th>
    62.             
    63.             <td>人民币td>
    64.             <th colspan="2">钞汇标志th>
    65.             
    66.             <td><u>钞票u>td>
    67.         tr>
    68.         <tr align="left">
    69.             <th colspan="2">金额th>
    70.             
    71.             <td>1.00元td>
    72.             <th colspan="2">手续费th>
    73.             
    74.             <td>0.57元td>
    75.         tr>
    76.         <tr align="left">
    77.             <th colspan="2">合计th>
    78.             
    79.             <td colspan="4">人民币（大写）：<b>壹圆整b>td>
    80.             
    81.         tr>
    82.         <tr align="left">
    83.             <th colspan="2">交易时间th>
    84.             
    85.             <td><i>2017年6月1日i>td>
    86.             <th colspan="2">时间戳th>
    87.             
    88.             <td><i>2017-06-01-13.00.00, 00000i>td>
    89.         tr>
    90.     table>
    91.     <p>票据打印时间 : 2017-06-01 15:00:12p>
    92.     <p><s>票据打印单位 : 江苏徐州业务中心s>p>
    93.     操作员 : 大曾
    94. body>
    95. html>

    解析：

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

    1.     <table border="1px"  cellspacing="0px"
    2.     width="60%">
    3. table>

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

    文字加粗：

    1.         <tr align="left">
    2.             <th colspan="2">合计th>
    3.             
    4.             <td colspan="4">人民币（大写）：<b>壹圆整b>td>
    5.               
    6.         tr>

     添加下划线：

    1.         <tr align="left">
    2.             <th colspan="2">币种th>
    3.             
    4.             <td>人民币td>
    5.             <th colspan="2">钞汇标志th>
    6.             
    7.             <td><u>钞票u>td>
    8.         tr>

    斜体文字：

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

    文字加删除线：

        <p><s>票据打印单位 : 江苏徐州业务中心s>p>
  • 相关阅读:
    第2-4-8章 规则引擎Drools实战(1)-个人所得税计算器
    数据采集：数据挖掘的基础
    Java环形链表_leetcode141(快慢指针、set)
    linux安装elasticsearch-head （es可视化界面）
    python每日一练(9)
    防重复操作的一种实现
    随机森林算法深入浅出
    OA项目之我的审批（查询&会议签字）
    Mac远程连接Windows 11
    【C++】string详细介绍及模拟实现string类
  • 原文地址：https://blog.csdn.net/weixin_73921499/article/details/136628565