html画一个发票预览
时间: 2023-11-13 13:05:21 浏览: 154
html增值税发票打印二维码.zip
以下是一个简单的发票预览的 HTML 代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>发票预览</title>
<style>
/* 样式表 */
body {
font-family: Arial, sans-serif;
}
.invoice-container {
border: 1px solid #ccc;
padding: 20px;
width: 500px;
margin: 0 auto;
}
.invoice-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.invoice-header h2 {
margin: 0;
}
.invoice-header p {
margin: 0;
font-size: 14px;
color: #666;
}
.invoice-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.invoice-item p {
margin: 0;
font-size: 14px;
color: #666;
}
.invoice-total {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
.invoice-total p {
margin: 0;
font-size: 16px;
color: #333;
font-weight: bold;
}
</style>
</head>
<body>
<div class="invoice-container">
<div class="invoice-header">
<h2>发票</h2>
<p>日期: 2022年1月1日</p>
</div>
<div class="invoice-item">
<p>商品名称</p>
<p>数量</p>
<p>单价</p>
<p>总价</p>
</div>
<div class="invoice-item">
<p>商品A</p>
<p>2</p>
<p>100元</p>
<p>200元</p>
</div>
<div class="invoice-item">
<p>商品B</p>
<p>1</p>
<p>50元</p>
<p>50元</p>
</div>
<div class="invoice-total">
<p>合计: 250元</p>
</div>
</div>
</body>
</html>
```
这段代码使用了一些基本的 HTML 元素和 CSS 样式,来展示一个简单的发票预览。你可以根据需要进行修改和定制。
阅读全文