<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 头部样式定义 */ .header { padding-bottom: 10px; /* 设置头部的下内边距 */ border: 5px solid red; /* 设置边框 */ position: relative; /* 设置为相对定位 */ } /* 表格样式定义 */ .quote-table { width: 100%; /* 表格宽度 */ border: 5px solid red; /* 设置表格边框 */ border-collapse: collapse; /* 边框重叠样式 */ } /* 设置每个单元格的基本样式 */ .quote-table td { border-top: 2px solid black; /* 单元格的上边框 */ height: 90px; /* 单元格高度 */ font-size: 30px; /* 字体大小 */ font-family: Arial; /* 字体样式 */ position: relative; /* 使子元素的绝对定位基于此元素 */ } /* 每行中的文本样式 */ .row-text { position: absolute; /* 绝对定位 */ left: 25px; /* 文本的左偏移量 */ } /* 竖线样式 */ .vertical-line { position: absolute; /* 绝对定位 */ height: 377px; /* 竖线的默认高度 */ border-left: 2px solid black; /* 竖线样式 */ left: 1000px; /* 竖线的左偏移量 */ top: 0px; /* 竖线的上偏移量 */ } /* 特殊高度的竖线样式 */ .special-height { position: absolute; /* 绝对定位 */ height: 95px; /* 竖线的默认高度 */ border-left: 2px solid black; /* 竖线样式 */ left: 444px; /* 竖线的左偏移量 */ top: 0px; /* 竖线的上偏移量 */ } /* 横线样式 */ .horizontal-line { position: absolute; /* 使用绝对定位 */ width: 250px; /* 横线宽度，可以按需调整 */ border-top: 2px solid black; /* 定义线条样式 */ left: 0; /* 从左边开始 */ top: 50%; /* 初始位置，可以调整来移动横线位置 */ } /* 标题样式 */ .title { display: inline-block; /* 将span元素变为行内块级元素 */ position: absolute; /* 使用绝对定位 */ top: 10px; /* 标题的上偏移量 */ left: 0; /* 标题的左偏移量 */ } /* 打印样式 */ @media print { .quote-table { width: 200mm; /* 设置表格的宽度 */ height: 300mm; /* 设置表格的高度 */ } .quote-table td { width: 100mm; /* 设置单元格的宽度 */ height: 50mm; /* 设置单元格的高度 */ } } </style> </head> <body> <div class="print-body"> <div class="header" style="display: flex; justify-content: space-between; align-items: center;"> <!-- 将图像移动到左侧 --> <img id="hyperlogo" src="https://singsongpict.oss-cn-hangzhou.aliyuncs.com/singsong_log_js.png" style="width: 86px; margin-left: 30px" /> <span class="title" style="font-size: 48px; font-family: Arial; margin-left: 444px">Sample Quote Sheet</span> </div> <table class="quote-table"> <tr> <td> <div class="row-text" style="left: 10px; top: 33px;">ITEM No.</div> <div class="vertical-line" style="left: 250px;"></div> <!-- 该竖线可以通过改变style属性中的值来调整 --> <div class="row-text" style="left: 450px; top:30px;">用户输入的值</div> </td> <td></td> </tr> <tr> <td> <div class="row-text" style="left: 20px; top: 33px;">SIZE</div> <!-- <div class="vertical-line" style="left: 150px;"></div>--> <div class="row-text" style="left: 450px; top:30px;">用户输入的值</div> </td> <td></td> </tr> <tr> <td> <div class="row-text" style="left: 5px; top: 33px;">WEIGHT</div> <!-- <div class="vertical-line" style="left: 150px;"></div>--> <div class="row-text" style="left: 450px; top:30px;">用户输入的值</div> <div class="vertical-line special-height" style="left: 800px;"></div> <div class="row-text" style="left: 810px; top: 33px;">PORT</div> <div class="vertical-line special-height" style="left: 900px;"></div> <div class="row-text" style="left: 910px; top:30px;">值</div> </td> <td></td> </tr> <tr> <td colspan="2" style="border: 2px solid black; height: 190px;"> <div style="display: flex; justify-content: space-between; position: relative;"> <span style="font-size: 30px; font-family: Arial; position: absolute; top: -80px; ">NOTE</span> <span style="font-size: 14px; font-family: Arial; position: absolute; top: 80px; right: 890px;">用户输入的值</span> <div class="horizontal-line"></div> <!-- 这是新添加的横线 --> <!-- 用户上传的图片位置调整为完全在NOTE行内 --> <img id="userImage" src="https://singsongpict.oss-cn-hangzhou.aliyuncs.com/singsong_log_js.png" alt="用户图片" style="position: absolute; right: 0px; bottom: -90px; width: 50mm; height: 50mm;"> </div> </td> </tr> </table> </div> </body> </html> <!--竖线的长度和高度：通过调整 .vertical-line 的 height 属性来更改竖线的高度。要更改特定的竖线高度， 可以为那个特定的竖线元素添加一个新的类或ID，并设置它的高度。--> <!--每行的横线：通过调整 .quote-table td 的 border-top 属性来更改横线的宽度。要更改特定行的横线宽度， 可以为那个特定的行添加一个新的类或ID，并设置它的 border-top。-->