當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML实现取餐小票

發布時間：2023/12/20 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML实现取餐小票小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

一、整體分析
二、各模塊實現代碼
- 1.HTML語句
- 2.CSS語句
三、運行結果
四、源碼

在學習HTML的過程中自己去嘗試實現一些小項目，寫下來博客記錄自己成長的過程，本文利用HTML+CSS在網頁實現餐飲小票，該餐飲小票可直接打印，也可以根據需求進行相應的更改，源碼以及素材已經全部放到了Gitee倉庫中，需要的小伙伴們到倉庫自取

倉庫地址：https://gitee.com/dream-flight/repository

提示：以下是本篇文章正文內容，下面案例可供參考

本文實現的小票原型：

一、整體分析

對于取餐小票來說，文字信息要區分大小并且居中、分割線為虛線、兩個table表格（兩行三列和兩行兩列）、二維碼圖片上方的段落上下方以及段首都要有空格。該小票的整體思路是利用div圖層和table表格來實現各個模塊，再將各個模塊按順序拼接即可。

圖示：

二、各模塊實現代碼

1.HTML語句

代碼如下（示例）：

<div>顧客聯</div><div class="place">請留意您的取餐賬單號</div><div class="self">自取顧客聯</div><div>XXX店鋪（XXXX分店）</div><div>010-123456789</div><div class="self">--結賬單--</div><div class="place">賬單號：X000001</div><div>賬單類型：堂食</div><div>人數：2</div><div>收銀員：張三</div><div>開單時間：2021-01-01 18:00:30</div><div>結賬時間：2021-01-01 18:01:24</div><hr/><table><tr><td width="50" align="center">數量</td><td width="190">品項</td><td width="50" align="center">金額</td></tr><tr><td valign="top">1</td><td>玉米肉松蛋餅2片<br>2 X --玉米肉松蛋餅<br>2 X --現磨豆漿（熱/甜）</td><td valign="top" align="right">8.00</td></tr></table><hr/><table><tr><td width="246">合計</td><td width="50" align="right">8.00</td></tr><tr><td>微支付</td><td align="right">8.00</td></tr></table><hr/><div>打印時間：2021-01-01 18:01:40</div><hr /><div class="note">       根據相關稅法規定，電子發票的開票日期同網上申請電子發票的日期，如您需要當日的電子發票請務必在消費當日通過掃描下方二維碼，根據指引步驟開具您的增值稅電子普通發票。此二維碼30天有效，掃描時請保持小票平整。</div><div class="picture"><img src="./image/picture.png" width="150px"/></div><div>官網：www.xxxxxxxx.com.cn</div><div>加盟熱線：86-21-123456789或86-22-123456789</div><br>

先利用多個div圖層將不同行的文字信息包裹,其次加入分割線和table表格
 用來表示一個空格，7個 表示兩個漢字的距離
在HTML中換行(回車鍵)會被解析為一個空格

在表格中設置文本的對齊格式時：
align用來設置文本的橫向排列：left居左，right居右，center居中
valign用來設置文本的縱向排列：top居上、center居中、bottom居下

HTML中利用img標簽插入圖片，src的屬性值為圖片存放的相對路徑（也可以為絕對路徑，本文中用到的為相對路徑）

2.CSS語句

代碼如下（示例）：

在HTML中，對樣式的設計寫在style標簽中，以key:value形式。在本文中利用了class來標記div圖層，這里也可以用id來標記div圖層，如果用id來標記div圖層的話在style樣式中把.改成#即可。（.用來選擇class，#用來選擇id）

三、運行結果

四、源碼

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>HTML實現取餐小票</title><style>body{width: 313px;font-size: 10px;}hr{border: 0.5px dashed;}.place{font-size: 24px;font-weight: bold;}.self{padding-left: 100px;}.note{padding-top: 20px;padding-bottom: 20px;}.picture{margin-left: 70px;margin-bottom: 20px;}</style></head><body><div>顧客聯</div><div class="place">請留意您的取餐賬單號</div><div class="self">自取顧客聯</div><div>XXX店鋪（XXXX分店）</div><div>010-123456789</div><div class="self">--結賬單--</div><div class="place">賬單號：X000001</div><div>賬單類型：堂食</div><div>人數：2</div><div>收銀員：張三</div><div>開單時間：2021-01-01 18:00:30</div><div>結賬時間：2021-01-01 18:01:24</div><hr/><table><tr><td width="50" align="center">數量</td><td width="190">品項</td><td width="50" align="center">金額</td></tr><tr><td valign="top">1</td><td>玉米肉松蛋餅2片<br>2 X --玉米肉松蛋餅<br>2 X --現磨豆漿（熱/甜）</td><td valign="top" align="right">8.00</td></tr></table><hr/><table><tr><td width="246">合計</td><td width="50" align="right">8.00</td></tr><tr><td>微支付</td><td align="right">8.00</td></tr></table><hr/><div>打印時間：2021-01-01 18:01:40</div><hr /><div class="note">       根據相關稅法規定，電子發票的開票日期同網上申請電子發票的日期，如您需要當日的電子發票請務必在消費當日通過掃描下方二維碼，根據指引步驟開具您的增值稅電子普通發票。此二維碼30天有效，掃描時請保持小票平整。</div><div class="picture"><img src="./image/picture.png" width="150px"/></div><div>官網：www.xxxxxxxx.com.cn</div><div>加盟熱線：86-21-123456789或86-22-123456789</div><br></body> </html>

以上便是HTML實現餐飲小票的分析過程以及代碼實現

總結

以上是生活随笔為你收集整理的HTML实现取餐小票的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html
小票

上一篇：国内外常用公共NTP网络时间同步服务器地
下一篇： syslinux 的EFI启动以及中文菜