最新版电子发票样式html+css--普通发票+增值发票

月小满

墨衍会员 · AI 创作全网分发码龄8年

关注

VIP免费原创最新推荐文章于 2026-03-08 05:02:54 发布 3.6k 阅读 AI 写同款· GEO 优化 ›

发票-html 【代码】发票-html。阅读详情

网页预览如下：

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, monos