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為分割線 --><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語句
代碼如下（示例）：
<style>body{/*對整個頁面進行樣式的修飾*/width: 313px;font-size: 10px; /*字體大小*/}/*對單獨的樣式進行設置*/hr{/*solid：實線 dashed：虛線*/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>在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实现取餐小票的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 国内外常用公共NTP网络时间同步服务器地
- 下一篇： 《浏览器工作原理与实践》学习笔记