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

最新推荐文章于 2024-05-27 15:27:29 发布

月小满

最新推荐文章于 2024-05-27 15:27:29 发布

阅读量4.1k

点赞数 9

分类专栏：前端css

本文链接：https://blog.csdn.net/weixin_44110923/article/details/118218458

版权

前端css 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

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

废话不多说，直接上代码

<!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;
}

打码不易，赞个行不行

月小满

关注

9
点赞
踩
18

收藏

觉得还不错? 一键收藏
2
评论
普通发票（增值税专用发票）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"&
复制链接

扫一扫