html css 制作单据
HTML 和 CSS 制作单据的方法
单据通常需要清晰的布局和结构化的数据展示。以下是制作单据的步骤：
HTML 结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单据</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="invoice">
<header class="invoice-header">
<h1>销售单据</h1>
<div class="invoice-info">
<span>单据编号: INV-2023-001</span>
<span>日期: 2023-10-15</span>
</div>
</header>
<div class="invoice-body">
<div class="client-info">
<h2>客户信息</h2>
<p>姓名: 张三</p>
<p>地址: 北京市朝阳区</p>
<p>电话: 13800138000</p>
</div>
<table class="invoice-items">
<thead>
<tr>
<th>项目</th>
<th>数量</th>
<th>单价</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品A</td>
<td>2</td>
<td>100.00</td>
<td>200.00</td>
</tr>
<tr>
<td>商品B</td>
<td>1</td>
<td>150.00</td>
<td>150.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计</td>
<td>350.00</td>
</tr>
</tfoot>
</table>
</div>
<footer class="invoice-footer">
<p>感谢您的惠顾！</p>
<p>公司名称: ABC有限公司</p>
</footer>
</div>
</body>
</html>CSS 样式
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.invoice {
max-width: 800px;
margin: 0 auto;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.invoice-header {
text-align: center;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.invoice-info {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.client-info {
margin-bottom: 20px;
}
.invoice-items {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.invoice-items th, .invoice-items td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.invoice-items th {
background-color: #f2f2f2;
}
.invoice-items tfoot {
font-weight: bold;
}
.invoice-footer {
text-align: center;
margin-top: 20px;
border-top: 1px solid #eee;
padding-top: 10px;
}关键要点
单据设计应注重清晰度和专业性。HTML 结构使用语义化标签，CSS 样式确保布局整齐。表格用于展示项目明细，页眉和页脚包含必要信息。
响应式设计确保单据在不同设备上可读。适当使用边框和背景色增强视觉效果，同时避免过度装饰影响实用性。
打印样式可添加 @media print 查询优化打印效果。单据编号和日期等关键信息应突出显示，便于后续查询和归档。
