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

废话不多说,直接上代码

<!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相关推荐

  1. 增值税专用发票 计算机 分类,增值税计算机稽核系统发票比对操作规程(试行)...

    第一章 总则 第一条 为了加强增值税计算机稽核工作的管理,保证增值税计算机稽核系统发票比对(以下简称发票比对)的正常运行,特制定本规程. 第二条 发票比对是税务机关利用计算机网络,将增值税一般纳税人( ...

  2. 请上传sku预览图后重新操作_增值税专用发票申请开票限额操作指南

    轻松开票帮助您轻松解决发票难题,QQ群:684582628 最近一些读者朋友反映漏看了小穗的文章,有两个办法可以解决. 1.阅读本文后,每篇文章点右下角点"在看",让系统知道您喜欢 ...

  3. 发票专用驱动sjz_“数智企业财税云领”增值税专用发票主题交流会圆满举办| 从专票电子化开始 开启企业数智化之旅...

    2020年11月12日,由用友公司主办的"数智企业·财税云领--YonSuite助力成长型企业专票电子化变革"主题交流会在大连奥利加尔大酒店成功举办.用友高级咨询专家.用友战略合作 ...

  4. 增值税普通发票和增值税专用发票有什么区别?

    增值税普通发票和增值税专用发票有什么区别? 参考网址:https://3g.163.com/news/article/EA5649FS05432BGW.html?isFromOtherWeb=true ...

  5. 重庆抵扣联信息系统服务器,增值税专用发票抵扣联信息采集系统

    <增值税专用发票抵扣联信息采集系统>由会员分享,可在线阅读,更多相关<增值税专用发票抵扣联信息采集系统(7页珍藏版)>请在人人文库网上搜索. 1.增值税专用发票抵扣联信息采集系 ...

  6. 网站服务器租赁发票税率,网络代维费及网络租赁费开增值税专用发票税率多少?...

    你这个说有问题,这个免税是不能开专票的,零税率和免税的货物不能开具增值税专用发票.一 增值税零税率 零税率,是增值税的一个法定税率. 纳税人销售零税率货物或者服务和无形资产,税法规定具有纳税的义务,但 ...

  7. 增值税专用发票抬头开错的处理方法

    本人开专票时开错了抬头,导致对方无法认证,需退回重开.今日顺利办理完毕,在此留下文字经验,以备他人不时之需. 本方法适用以下情况: 1.票已经跨月,且已扣税: 2.对方未认证,发票退回在手上: 3.发 ...

  8. 增值税专用发票与增值税普通发票的区别?

    简单的说: 增值税专用发票一般可以抵扣税金 增值税普通发票不能抵扣税金增值税专用发票是我国为了推行新的增值税制度而使用的新型发票,与日常经营过程中所使用的普通发票相比,有如下特点:? (1)发票使用的 ...

  9. 营改增后不能抵扣的15种专用发票情形

    "营改增"以后,增值税发票的处理逐渐成为众多企业与会计人员关注的重点.本文为大家整理了"营改增"后15种不能抵扣的发票情形,希望对大家有所帮助. 1.票款不一致 ...

最新文章

  1. js onclick方法
  2. python装饰器原理-python装饰器原理和用法总结
  3. k8s如何设置虚拟内存_绝地求生内存优化设置教程(建议收藏)
  4. 11.深度学习练习:Keras tutorial - the Happy House(推荐)
  5. 做好7步 迅速成为行业专家
  6. 浪漫情人节|C语言画心型
  7. 内核开发知识第二讲,编写Kerner 程序中注意的问题.
  8. Maven环境搭建和介绍
  9. MFC程序减少体积的方法
  10. 解密阿里云之飞天平台内核
  11. LordPe dump进程内存实现
  12. 北卡罗来纳州立大学计算机科学,NCSU的CS「北卡罗来纳州立大学罗利分校计算机科学系」...
  13. 使用matlab建立个人简历,HTML 使用表格制作简单的个人简历
  14. 一个男人,给他女朋友的男朋友的一封信
  15. Ubuntu14.04 安装 TP_LINK驱动 TL-WDN5200H 1.0无线网卡
  16. java从零到项目实战(八)
  17. python-random模块
  18. 究竟什么时候该看哪个后视镜?老司机用经验告诉你答案
  19. 如何通过视频推广让你的App一夜爆红
  20. 可以审计oracle的工具,Oracle 审计功能 Audit使用教程(2)

热门文章

  1. c语言休止符用法,休止符写法详解
  2. ByteBuffer 详解
  3. python输出方格_使用Python实现LBM(格子法)方腔驱动流
  4. 抄作业:LBM算法有哪些优势?
  5. java was stared but returned exit code=13问题解决
  6. 国外破解组织宣布《星际2》破解失败
  7. 《毛毛虫组》【Alpha】Scrum meeting 2
  8. 带你了解什么是中断以及外部中断案例分析
  9. 计算机专业普渡大学全美排名,2019普渡大学USNews排名
  10. win7计算机没有光驱图标不见了,win7系统光驱图标消失怎么办