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

废话不多说,直接上代码

<!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. 工具用途_机械加工中研磨加工刀具(砂轮)﹑治工具及其用途
  2. 趋势科技4月移动client病毒报告
  3. 这款超火的游戏,AI只用4小时,就秀出了人类花1年才能达到的水平
  4. Java笔记-CXF使用Adapter处理复杂类型(如Map)
  5. 【nodejs原理源码杂记(8)】Timer模块与基于二叉堆的定时器
  6. [Vue warn]: Unknown custom element: <Top> - did you register the component correctly?
  7. iOS 图片拉伸、拉伸两端保留中间
  8. 大数据开发笔记(七):Kafka分布式流式处理
  9. matlab如何将二进制文件写入txt文档中
  10. 转载:基于大数据的互联网金融反洗钱模型初探
  11. 上下文无关文法的组成
  12. 用百度地图进行搜索周边的建筑,医院,餐厅,学校等。
  13. 一份超详细的UI设计规范全攻略
  14. mac 国家税务总局发票不显示验证码
  15. 论文阅读: [3d]Audio-driven Talking Face Video Generation with Learning-based Personalized Head Pose
  16. java 电商 插件 开发_JAVA项目实战开发电商项目案例(六与七)商品分类与商品模块管理开发...
  17. m2e-wtp的作用
  18. onfouce事件与onblur事件
  19. 【软件构造】静态域与静态方法
  20. web自动化时,怎么定位鼠标悬浮时才出现的元素

热门文章

  1. 工件带磁后对工作造成的影响
  2. 纷享销客CRM自定义函数:计划任务
  3. netty粘包拆包之LengthFieldBasedFrameDecoder解码器
  4. 如何将图片切割成瓦片图?
  5. SSD+HDD,win7+deepin15.11,win7引导启动失败!
  6. dell服务器维修点绵阳,绵阳戴尔电脑维修
  7. (window)C语言OCI的方式连接oracle
  8. 思科WebEx会议应用停止支持Blackberry OS 6/7/10
  9. c++中“::”和“:” 冒号 意思
  10. 实分析斯坦恩中文版_如何评价Stein的实分析以及复分析翻译版本?