首页html画一个发票预览

html画一个发票预览

时间: 2023-11-13 14:05:21 浏览: 169

以下是一个简单的发票预览的 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 样式，来展示一个简单的发票预览。你可以根据需要进行修改和定制。

阅读全文