小票打印頁面

本文轉載自查看原文 2016-08-31 15:43 8003 HTML5/CSS3/ css/ 前端/ html

打印小票頁面，效果圖：

css代碼及html如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/> 
        <title>小票打印</title>
        <style type="text/css">
        *{padding:0;margin: 0;}
        h1{font-size: 20px;}
        h3{font-size: 16px;}
        .left{
            float: left;
        }
        .right{
            float:right;
        }
        .clearfix{
            clear: both;
        }
        ul{list-style: none;}
        .print_container{
            padding: 20px;
            width: 188px;
        }
        .section1{
        }
        .section2 label{
            display: block;
        }
        .section3 label{
            display: block;
        }
        .section4{
        }
        .section4 .total label{
            display: block;
        }
        .section4 .other_fee{
            border-bottom: 1px solid #DADADA;
        }
        .section5 label{
            display: block;
        }
        </style>
    </head>
    <body style="background-color:#fff;">
        <div class="print_container">
            <h1>給顧客專用</h1>
            <span>**************************</span>
            <div class="section1">
                <h3>百度外賣</h3>
                <h3>在線支付預約</h3>
            </div>
            <span>**************************</span>
            <div class="section2">
                <label>期望送達時間：5678</label>
                <label>訂單備注：1111</label>
            </div>
            <span>**************************</span>
            <div class="section3">
                <label>訂單編號：567890</label>
                <label>下單時間：1111</label>
            </div>
            <span>**************************</span>
            <div class="section4">
                <div style="border-bottom: 1px solid #DADADA;">
                    <!--<ul>
                        <div>菜單名稱     數量    金額</div>
                        <li>米飯米飯 米飯 米飯 米飯 米飯 米飯       2    28元</li>
                        <li>米飯      2    28元</li>
                    </ul>-->
                    <table style="width: 100%;">
                        <thead>
                            <tr>
                                <td width="60%">菜單名稱</td>
                                <td width="20%">數量</td>
                                <td width="20%">金額</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>米飯</td>
                                <td>2</td>
                                <td>28.00</td>
                            </tr>
                            <tr>
                                <td>米飯</td>
                                <td>2</td>
                                <td>28.00</td>
                            </tr>
                            <tr>
                                <td>米飯</td>
                                <td>2</td>
                                <td>28.00</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="other_fee">
                    <div class="canh">
                        <label class="left">餐盒費</label>
                        <label class="right">0</label>
                        <div class="clearfix"></div>
                    </div>
                    <div class="peis">
                        <label class="left">配送費</label>
                        <label class="right">0</label>
                        <div class="clearfix"></div>
                    </div>
                    <div class="manj">
                        <label class="left">立減優惠</label>
                        <label class="right">0</label>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="total">
                    <label class="left">總計</label>
                    <label class="right">39</label>
                    <div class="clearfix"></div>
                </div>
                <div style="text-align: right;">
                    <label>顧客已付款</label>
                </div>
                <span>**************************</span>
            </div>
            <div class="section5">
                <label>姓名：小花</label>
                <label>地址：北京</label>
                <label>電話：67890</label>
            </div>    
            <span>**************************</span>
        </div>
    </body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 關於web頁面JApplet打印小票打印小票小票打印機頁面打印無法自適應長度導致超長空白打印 lodop打印收費小票 Android 小票打印USB c# 小票打印 c# 小票打印功能 C# POS 小票打印案例一：打印超市的購物小票 linux下使用小票打印