最新版电子发票样式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>原文地址：https://blog.csdn.net/weixin_44110923/article/details/142521476
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！