最新版电子发票样式html+css--普通发票+增值发票
网页预览如下：
html代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>电子发票（普通发票）</title><style>* {padding: 0;margin: 0;}ul,ul li {list-style: none;margin: 0;padding: 0;}body {font-family: "KaiTi";font-weight: 500;}label {color: #902020;}span{font-family: 'SimSun', 'STSong', 'Songti SC', '宋体', sans-serif;}.rmb {font-family: Arial, Helvetica, sans-serif;}.c-red {color: #ff3133;}.c-black {color: #000;}.c-black-big{color: #000;font-size: 18px;}.f-big {font-size: 14px;font-family: "Courier New", monospace;}.f-small {font-size: 12px;}.invoiceMain {box-sizing: border-box;width: 794px;margin: 0 auto;font-size: 12px;color: #000;padding: 20px;border: 1px solid #000;}.invoiceHeader {display: flex;justify-content: space-between;}.headerLeft {width: 210px;display: flex;}.headerLeft .tag{width: 105px;height: 75px;text-align: center;line-height: 75px;}.headerLeft div:nth-child(1) {line-height: 26px;}.headerLeft div p {line-height: 26px;}.headerLeft div:nth-child(2) p.c-red {width: 170px;height: 46px;text-align: center;line-height: 42px;font-size: 24px;letter-spacing: 2px;}.headerLeft div p.c span {font-size: 18px;letter-spacing: 1px;}.headerRight {margin-top: 14px;width: 206px;}.headerRight p {text-align: left;margin-bottom: 11px;}.headerMiddle {text-align: center;width: 360px;display: flex;flex-direction: column;/* justify-items: center; */align-items: center;}.headerMiddle h1 {font-size: 26px;font-weight: 500;color: #902020;padding-bottom: 10px;}.total .rmb {font-size: 14px;font-family: "Courier New", Courier, monospace;}.line {width: 300px;height: 3px;border-top: #902020 1px solid;border-bottom: #902020 1px solid;margin-bottom: 40px;}.invoiceBody {border: 1px solid #902020;position: relative;}.line-yellow, .line-red{position: absolute;right: -2px;width: 2px;height: 178px;z-index: -1;}.line-yellow{background-color: rgb(246, 237, 225);top: -1px;}.line-red{background-color: rgb(118, 89, 84);bottom: -1px;}.userInfo {width: 100%;display: flex;align-items: center;height: 83px;border-bottom: 1px solid #902020;}.userInfo ul {width: 50%;padding: 0;}.userInfo ul li {line-height: 36px;}.userInfo ul li:nth-child(2) .f-big {/* letter-spacing: 2px; */}.userInfo ul li:nth-child(3) {position: relative;}.buy {width: 20px;border-right: 1px solid #902020;padding: 0 2px;text-align: center;height: 100%;display: flex;align-items: center;color: #902020;line-height: 14px;}.sell {width: 20px;border-right: 1px solid #902020;border-left: 1px solid #902020;padding: 0 2px;text-align: center;height: 100%;display: flex;align-items: center;color: #902020;line-height: 14px;}.GoodsTable {width: 100%;border-collapse: collapse;table-layout: fixed;}.GoodsTable td {color: #902020;}.item-title{padding-right: 10px;}.invoice-list {overflow: hidden;line-height: 18px;}.invoice-list td {color: #000;vertical-align: top;}.invoice-list td:nth-child(3) {text-align: center;}.invoice-list td:nth-child(4),.invoice-list td:nth-child(5),.invoice-list td:nth-child(6),.invoice-list td:nth-child(7),.invoice-list td:nth-child(8),.total td:nth-child(5),.total td:nth-child(6),.total td:nth-child(7),.total td:nth-child(8) {text-align: right;}.invoice-list tr td {height: 21px;}.GoodsTable thead tr {height: 24px;text-align: center;}.GoodsTotal {height: 30px;border-top: 1px solid #902020;border-bottom: 1px solid #902020;}.total td {color: #000;}.total td:nth-child(1) {text-align: center;color: #902020;}.total td:nth-child(6),.total td:nth-child(8) {}.remark {display: flex;height: 75px;}.remark-title {width: 20px;height: 100%;border-right: 1px solid #902020;padding: 0 5px;text-align: center;display: flex;align-items: center;color: #902020;line-height: 14px;}.remark-content {font-family: 'SimSun', 'STSong', 'Songti SC', '宋体', sans-serif;word-break: break-all;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow-y: hidden;line-height: 13px;}.invoiceFooter {padding-top: 20px;padding-left: 60px;display: flex;justify-content: space-between;}.invoiceFooter li {width: 25%;}</style>
</head><body><div class="invoiceMain"><div class="invoiceHeader"><div class="headerLeft"><div style="margin-right: 5px"><!-- 二维码占位 --><img src="qrcode.png" width="75" height="75" alt="" /></div><div class="tag">差额征税-差额开票</div></div><div class="headerMiddle"><h1>电子发票（普通发票）</h1><div class="line"></div></div><div class="headerRight"><p><label>发票号码：</label><span>39472000000164594029</span></p><p><label>开票日期：</label><span>2024年09月17日</span></p></div></div><div class="invoiceBody"><div class="userInfo"><div class="buy">购买方信息</div><ul><li><label>名称:</label><span>山东某某网络技术有限公司</span></li><li><label>统一社会信用代码/纳税人识别号:</label></li></ul><div class="sell">销售方信息</div><ul><li><label>名称:</label><span>山东阿里医院管理有限公司</span></li><li><label>统一社会信用代码/纳税人识别号:</label><span class="f-big">9178884MA300FT9XQ</span></li></ul></div><div><div style="height:150px"><table class="GoodsTable" cellpadding="0" cellspacing="0"><thead><tr><td style="width: 20%">项目名称</td><td style="width: 10%; text-align: left">规格型号</td><td style="width: 7%">单 位</td><td style="width: 12%; text-align: right">数 量</td><td style="width: 13%; text-align: right">单 价</td><td style="width: 13%; text-align: right">金 额</td><td style="width: 13%; text-align: center;">税率/征收率</td><td style="text-align: right; border-right: none">税 额</td></tr></thead><tbody class="invoice-list"><!-- 表格数据-遍历 --><tr><td><span class="item-title">*企业管理服务*网络服务费</span></td><td><span>无</span></td><td><span>无</span></td><td><span>5</span></td><td><span>2.364</span></td><td><span>11.82</span></td><td style="text-align: center;"><span>1%</span></td><td><span>1.18</span></td></tr><tr><td><span class="item-title">*企业管理服务*网络服务费</span></td><td><span>无</span></td><td><span>无</span></td><td><span>5</span></td><td><span>2.364</span></td><td><span>11.82</span></td><td style="text-align: center;"><span>1%</span></td><td><span>1.18</span></td></tr></tbody></table></div><table class="GoodsTable" cellpadding="0" cellspacing="0"><tr class="total"><td style="width: 26%; text-align: center;">合 计</td><td style="width: 36%"></td><td style="width: 13%; text-align: right;"><span class="rmb">¥</span><span>8575.47</span></td><td style=" text-align: right;"><span class="rmb">¥</span><span>2.36</span></td></tr><tr class="GoodsTotal"><td style="text-align: center; border-right: 1px solid #902020;">价税合计（大写）</td><td colspan="3"><div style="width: 100%; display: flex"><div type="text" style="width: 60%;"><span class="c-black" style="padding-left: 5px;"><span style="font-size: 18px;">⊗</span>壹万叁仟元整</span></div><div type="text" style="width: 30%">(小写)<span class="c-black"><span class="rmb">¥</span><span style="font-size: 14px;">13000.00</span></span></div></div></td></tr></table></div><div class="remark"><div class="remark-title">备注</div><div class="remark-content"><p>购买方地址:</p><p>方开户银行:</p><p>销售方地址:</p><p>方开户银行: </p><p><Br>收款人: 复核人: </p></div></div><div class="line-yellow"></div><div class="line-red"></div></div><ul class="invoiceFooter"><li><label>开票人:</label><span>路人甲</span></li></ul></div>
</body></html>