普通发票（增值税专用发票）html+css

因业务需要，将新版发票样式呈现出来。效果如下：

废话不多说，直接上代码

<!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><link rel="stylesheet" href="invoice.css">
</head>
<body><div class="toptip c-red">模板样式仅供参考，不可用于实际开票依据！</div><div class="invoicMain"><!-- head start --><div class="invoiceHeader"><div class="headerLeft"><div><img src="qrcode.png" width="83" height="83" alt=""></div><div><p class="c-red">3700194130</p><p class="c"><label>机器编号：</label><br><span>499098532085</span></p></div></div><div class="headerMiddle"><h1>增值税专用发票</h1><div class="line"></div></div><div class="headerRight"><p><strong>№</strong><span class="c-red">35891172</span></p><p>3700194130</p><p>35891172</p><p><label>开票日期：</label><span>2021年06月07日</span></p></div></div><!-- head end --><!-- invoice body start --><div class="invoiceBody"><div class="userInfo"><div class="buy">购买方</div><ul><li><label>名&nbsp;&nbsp;&nbsp;&nbsp;称：</label><span>山东济南网络信息技术有限公司</span></li><li><label>纳税人识别号：</label><span class="f-big">913564523096023930</span></li><li><label>地址、&nbsp;电话：</label><span class="f-small">济南市槐荫区经十路4214209号 0531-85094547</span></li><li><label>开户行及账号：</label><span class="f-small">中国银行股份有限公司济南大学科技园支行 6225885410839945</span></li></ul><div class="password">密码区</div><div class="pwdInfo"><span class="f-big">0357+39177127583965+0*13>3>0<><22908-+<+03*<-84>40><3<64-076746-2+2082*9112+057188/07-228<135701+4/>039*1630-817</span>></div></div><div><table class="GoodsTable" cellpadding="0" cellspacing="0"><thead><tr><td style="width: 24%">货物或应税劳务、服务名称</td><td style="width: 10%">规格型号</td><td style="width: 7%">单位</td><td style="width: 10%">数 量</td><td style="width: 10%">单 价</td><td style="width: 16%">金 额</td><td style="width: 7%">税率</td><td style="width: 16%; border-right: none;">税 额</td></tr></thead><tbody class="invoice-list" style="height: 126px;"><tr><td><span>*乳制品*新希望天香透明</span></td><td><span>180ML</span></td><td><span>袋</span></td><td><span>5</span></td><td><span>2.364</span></td><td><span>11.82</span></td><td><span>1%</span></td><td><span>1.18</span></td></tr><tr><td><span>新希望天香透明袋纯牛奶</span></td><td><span>180ML</span></td><td><span>袋</span></td><td><span>5</span></td><td><span>2.364</span></td><td><span>11.82</span></td><td><span>1%</span></td><td><span>1.18</span></td></tr><tr><td><span>新希望天香透明袋纯牛奶</span></td><td><span>180ML</span></td><td><span>袋</span></td><td><span>5</span></td><td><span>2.364</span></td><td><span>11.82</span></td><td><span>1%</span></td><td><span>1.18</span></td></tr><tr><td><span>新希望天香透明袋纯牛奶</span></td><td><span>180ML</span></td><td><span>袋</span></td><td><span>5</span></td><td><span>2.364</span></td><td><span>11.82</span></td><td><span>1%</span></td><td><span>1.18</span></td></tr><tr><td><span>新希望天香透明袋纯牛奶</span></td><td><span>180ML</span></td><td><span>袋</span></td><td><span>5</span></td><td><span>2.364</span></td><td><span>11.82</span></td><td><span>1%</span></td><td><span>1.18</span></td></tr><tr><td><span>新希望天香透明袋纯牛奶</span></td><td><span>180ML</span></td><td><span>袋</span></td><td><span>5</span></td><td><span>2.364</span></td><td><span>11.82</span></td><td><span>1%</span></td><td><span>1.18</span></td></tr></tbody><tfoot><tr class="total"><td>合 &nbsp;&nbsp;&nbsp;计</td><td></td><td></td><td></td><td></td><td><span class="rmb">￥</span>1425.00</td><td></td><td><span class="rmb">￥</span>1425.00</td></tr><tr class="GoodsTotal"><td>价税合计(大写)</td><td colspan="7"><div style="width: 100%;display:flex"><div type="text" style="width: 60%"><span class='c-black'>ⓧ壹万叁仟元整</span></div><div type="text" style="width: 30%"> (小写) <span class='c-black'><span class="rmb">￥</span>1425.00</span></div></div></td></tr></tfoot></table><div class="userInfo"><div class="buy">销售方</div><ul><li><label>名&nbsp;&nbsp;&nbsp;&nbsp;称：</label><span>山东济南网络信息技术有限公司</span></li><li><label>纳税人识别号：</label><span class="f-big">913564523596023930</span></li><li><label>地址、&nbsp;电话：</label><span class="f-small2">山东省济南市槐荫区经十路28988号乐梦公寓3号楼1单元605号 0531-87527787</span></li><li><label>开户行及账号：</label><span class="f-small">中国银行股份有限公司济南大学科技园支行 6225885410839945</span></li></ul><div class="password">备注</div><div class="pwdInfo">aaa</div></div></div></div><!-- invoice body start --><ul class="invoicetFooter"><li><label>收款人：</label><span>张莫某</span></li><li><label>复核：</label><span>张莫某</span></li><li><label>开票人：</label><span>张莫某</span></li><li><label>销售方：（章）</label></li></ul></div>
</body>
</html>

css代码如下：

* {padding: 0;margin: 0;
}ul, ul li {list-style: none;margin: 0;padding: 0;
}body {font-family: 'simsun';
}label {color: #008000;
}.rmb {font-family: Arial, Helvetica, sans-serif;
}.c-red {color: #ff3133;
}.c-black {color: #000;
}.f-big {font-size: 20px;
}.f-small {font-size: 12px;
}.f-small2 {font-size: 10px;
}.invoicMain {width: 920px;margin: 0 auto;font-size: 14px;color: #000;padding: 20px;border: 1px dotted #000;
}.toptip {text-align: center;padding-top: 4px;height: 20px;
}.invoiceHeader {height: 126px;display: flex;/* justify-content: space-between; */align-items: center;
}.headerLeft {width: 300px;display: flex;
}.headerLeft div:nth-child(1) {width: 85px;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 {padding-left: 28px;width: 316px;
}.headerRight p:nth-child(1) {font-size: 24px;
}.headerRight p:nth-child(1) strong {font-family: 'LiSu';font-size: 30px;padding-right: 20px;
}.headerRight p:nth-child(2) {text-align: right;margin-top: -5px;
}.headerRight p:nth-child(3) {text-align: right;font-size: 18px;letter-spacing: 1px;
}.headerRight p:nth-child(4) {text-align: center;letter-spacing: 1px;
}.headerMiddle {text-align: center;width: 300px;
}.headerMiddle h1 {font-size: 32px;color: #008000;padding-bottom: 22px;
}.total .rmb {font-size: 16px;
}.line {height: 2px;border-top: #008000 1px solid;border-bottom: #008000 1px solid;margin-bottom: 30px;
}.headerRight li {line-height: 24px;
}.invoiceBody {border: 1px solid #008000;
}.userInfo {width: 100%;display: flex;align-items: center;height: 96px;border-bottom: 1px solid #008000;
}.userInfo ul {width: 50%;margin: 0 5px;padding: 0;
}.userInfo ul li {line-height: 24px;
}.userInfo ul li:nth-child(2) .f-big {padding-left: 24px;letter-spacing: 2px;
}.userInfo ul li:nth-child(3) {position: relative;
}.userInfo ul li .f-small2 {position: absolute;width: 120%;transform: scale(0.8);left: 44px;
}.buy {width: 20px;border-right: 1px solid #008000;padding: 0 10px;text-align: center;height: 100%;display: flex;align-items: center;color: #008000;line-height: 20px;
}.password {width: 20px;padding: 0 10px;border-right: 1px solid #008000;border-left: 1px solid #008000;text-align: center;height: 100%;display: flex;align-items: center;color: #008000;line-height: 20px;
}.pwdInfo {flex: 1;padding: 0 15px;height: 88px;overflow: hidden;word-break: break-all;letter-spacing: 2px;
}.goodsInfo {height: 210px;margin: 0;padding: 0;
}.goodsInfo li {display: flex;color: #008000;text-align: center;
}.name {width: 260px;border-right: 1px solid #008000;
}.spec {width: 140px;border-right: 1px solid #008000;
}.qty {width: 108px;border-right: 1px solid #008000;
}.unit, .taxRate {width: 65px;border-right: 1px solid #008000;
}.qty, .price {width: 160px;border-right: 1px solid #008000;
}.money {flex: 1;border-right: 1px solid #008000;
}.taxAmount {flex: 1;
}.GoodsTable {height: 210px;width: 100%;border-collapse: collapse;table-layout: fixed
}.GoodsTable td {border-right: 1px solid #008000;color: #008000;padding: 0 4px;
}.invoice-list td {color: #000;vertical-align: middle;
}.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 {height: 126px;overflow: hidden;
}.invoice-list tr td {height: 21px;
}.GoodsTable thead tr {height: 24px;text-align: center;
}.GoodsTotal {height: 34px;
}.GoodsTotal {border-top: 1px solid #008000;border-bottom: 1px solid #008000;
}.total td {color: #000;
}.total td:nth-child(1) {text-align: center;color: #008000;
}.total td:nth-child(6), .total td:nth-child(8) {font-size: 18px;
}.invoicetFooter {padding-top: 2px;display: flex;justify-content: space-between;
}.invoicetFooter li {width: 25%;
}.invoiceHeader-left {width: 67%;display: flex;align-items: center;justify-content: space-between;
}

打码不易，赞个行不行

普通发票（增值税专用发票）html+css相关推荐

增值税专用发票计算机分类,增值税计算机稽核系统发票比对操作规程（试行）...
第一章总则第一条为了加强增值税计算机稽核工作的管理,保证增值税计算机稽核系统发票比对(以下简称发票比对)的正常运行,特制定本规程. 第二条发票比对是税务机关利用计算机网络,将增值税一般纳税人( ...
请上传sku预览图后重新操作_增值税专用发票申请开票限额操作指南
轻松开票帮助您轻松解决发票难题,QQ群:684582628 最近一些读者朋友反映漏看了小穗的文章,有两个办法可以解决. 1.阅读本文后,每篇文章点右下角点"在看",让系统知道您喜欢 ...
发票专用驱动sjz_“数智企业财税云领”增值税专用发票主题交流会圆满举办| 从专票电子化开始开启企业数智化之旅...
2020年11月12日,由用友公司主办的"数智企业·财税云领--YonSuite助力成长型企业专票电子化变革"主题交流会在大连奥利加尔大酒店成功举办.用友高级咨询专家.用友战略合作 ...
增值税普通发票和增值税专用发票有什么区别？
增值税普通发票和增值税专用发票有什么区别? 参考网址:https://3g.163.com/news/article/EA5649FS05432BGW.html?isFromOtherWeb=true ...
重庆抵扣联信息系统服务器,增值税专用发票抵扣联信息采集系统
<增值税专用发票抵扣联信息采集系统>由会员分享,可在线阅读,更多相关<增值税专用发票抵扣联信息采集系统(7页珍藏版)>请在人人文库网上搜索. 1.增值税专用发票抵扣联信息采集系 ...
网站服务器租赁发票税率,网络代维费及网络租赁费开增值税专用发票税率多少？...
你这个说有问题,这个免税是不能开专票的,零税率和免税的货物不能开具增值税专用发票.一增值税零税率零税率,是增值税的一个法定税率. 纳税人销售零税率货物或者服务和无形资产,税法规定具有纳税的义务,但 ...
增值税专用发票抬头开错的处理方法
本人开专票时开错了抬头,导致对方无法认证,需退回重开.今日顺利办理完毕,在此留下文字经验,以备他人不时之需. 本方法适用以下情况: 1.票已经跨月,且已扣税: 2.对方未认证,发票退回在手上: 3.发 ...
增值税专用发票与增值税普通发票的区别？
简单的说: 增值税专用发票一般可以抵扣税金增值税普通发票不能抵扣税金增值税专用发票是我国为了推行新的增值税制度而使用的新型发票,与日常经营过程中所使用的普通发票相比,有如下特点:? (1)发票使用的 ...
营改增后不能抵扣的15种专用发票情形
"营改增"以后,增值税发票的处理逐渐成为众多企业与会计人员关注的重点.本文为大家整理了"营改增"后15种不能抵扣的发票情形,希望对大家有所帮助. 1.票款不一致 ...

普通发票（增值税专用发票）html+css

普通发票（增值税专用发票）html+css相关推荐

最新文章

热门文章