html css 制作单据

HTML和CSS制作单据的步骤

单据结构设计
使用HTML构建单据的基本框架，包含表头、表格主体和表尾。表头通常包含单据标题、编号和日期；表格主体用于展示明细数据；表尾包含合计金额和备注信息。

<div class="invoice">
  <div class="header">
    <h1>销售单据</h1>
    <p>编号: INV-2023-001</p>
    <p>日期: 2023-10-01</p>
  </div>

  <table class="details">
    <thead>
      <tr>
        <th>序号</th>
        <th>商品名称</th>
        <th>数量</th>
        <th>单价</th>
        <th>金额</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>商品A</td>
        <td>2</td>
        <td>100</td>
        <td>200</td>
      </tr>
    </tbody>
  </table>

  <div class="footer">
    <p>合计: 200元</p>
    <p>备注: 现金支付</p>
  </div>
</div>

样式设计
通过CSS为单据添加样式，包括边框、字体、颜色和对齐方式。单据通常采用固定宽度和清晰的边框以增强可读性。

.invoice {
  width: 800px;
  margin: 0 auto;
  border: 1px solid #000;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.details {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.details th, .details td {
  border: 1px solid #000;
  padding: 8px;
  text-align: center;
}

.footer {
  text-align: right;
}

响应式设计
确保单据在移动设备上也能正常显示，通过媒体查询调整布局和字体大小。

@media (max-width: 600px) {
  .invoice {
    width: 100%;
    padding: 10px;
  }

  .details th, .details td {
    padding: 4px;
    font-size: 12px;
  }
}

打印优化
为单据添加打印样式，确保打印时背景色和边框正常显示。

@media print {
  .invoice {
    width: 100%;
    border: none;
  }

  .details {
    page-break-inside: avoid;
  }
}

通过以上步骤，可以制作一个结构清晰、样式美观且支持响应式和打印的单据。