在学习HTML的过程中自己去尝试实现一些小项目，写下来博客记录自己成长的过程，本文利用HTML+CSS在网页实现餐饮小票，该餐饮小票可直接打印，也可以根据需求进行相应的更改，源码以及素材已经全部放到了Gitee仓库中，需要的小伙伴们到仓库自取
仓库地址：https://gitee.com/dream-flight/repository
本文实现的小票原型：
一、整体分析
对于取餐小票来说，文字信息要区分大小并且居中、分割线为虚线、两个table表格（两行三列和两行两列）、二维码图片上方的段落上下方以及段首都要有空格。该小票的整体思路是利用div图层和table表格来实现各个模块，再将各个模块按顺序拼接即可。
图示：
二、各模块实现代码
1.HTML语句
代码如下（示例）：
<div>顾客联</div><divclass="place">请留意您的取餐账单号</div><divclass="self">自取顾客联</div><div>XXX店铺（XXXX分店）</div><div>010-123456789</div><divclass="self">--结账单--</div><divclass="place">账单号：X000001</div><div>账单类型：堂食</div><div>人数：2</div><div>收银员：张三</div><div>开单时间：2021-01-0118:00:30</div><div>结账时间：2021-01-0118:01:24</div><!--hr为分割线--><hr/><table><tr><tdwidth="50"align="center">数量</td><tdwidth="190">品项</td><tdwidth="50"align="center">金额</td></tr><tr><tdvalign="top">1</td><td>玉米肉松蛋饼2片<br>2X--玉米肉松蛋饼<br>2X--现磨豆浆（热/甜）</td><tdvalign="top"align="right">8.00</td></tr></table><hr/><table><tr><tdwidth="246">合计</td><tdwidth="50"align="right">8.00</td></tr><tr><td>微支付</td><tdalign="right">8.00</td></tr></table><hr/><div>打印时间：2021-01-0118:01:40</div><hr/><divclass="note"> 根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。</div><divclass="picture"><imgsrc="./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.5pxdashed; } .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）
三、运行结果
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>HTML实现取餐小票</title><style>body{ width: 313px; font-size: 10px; } hr{ border: 0.5pxdashed; } .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><divclass="place">请留意您的取餐账单号</div><divclass="self">自取顾客联</div><div>XXX店铺（XXXX分店）</div><div>010-123456789</div><divclass="self">--结账单--</div><divclass="place">账单号：X000001</div><div>账单类型：堂食</div><div>人数：2</div><div>收银员：张三</div><div>开单时间：2021-01-0118:00:30</div><div>结账时间：2021-01-0118:01:24</div><hr/><table><tr><tdwidth="50"align="center">数量</td><tdwidth="190">品项</td><tdwidth="50"align="center">金额</td></tr><tr><tdvalign="top">1</td><td>玉米肉松蛋饼2片<br>2X--玉米肉松蛋饼<br>2X--现磨豆浆（热/甜）</td><tdvalign="top"align="right">8.00</td></tr></table><hr/><table><tr><tdwidth="246">合计</td><tdwidth="50"align="right">8.00</td></tr><tr><td>微支付</td><tdalign="right">8.00</td></tr></table><hr/><div>打印时间：2021-01-0118:01:40</div><hr/><divclass="note"> 根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。</div><divclass="picture"><imgsrc="./image/picture.png"width="150px"/></div><div>官网：www.xxxxxxxx.com.cn</div><div>加盟热线：86-21-123456789或86-22-123456789</div><br></body></html>
以上便是HTML实现餐饮小票的分析过程以及代码实现
