文章目录

一、整体分析
二、各模块实现代码
- 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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码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实现取餐小票相关推荐

中国电子学会图形化四级编程题：食堂取餐
「青少年编程竞赛交流群」已成立(适合6至18周岁的青少年),公众号后台回复[Scratch]或[Python],即可进入.如果加入了之前的社群不需要重复加入. 我们将有关编程题目的教学视频已经发布到抖 ...
送餐机器人---取餐完成的确认方式
文章目录 1. 共性设计---超时机制 2. 贝叶斯送餐机器人(2020年中)---触摸头顶的触摸按键 3. 擎朗T8送餐机器人(2021年底发布)----摄像头智能判断 4.普渡贝拉(2020年底发 ...
利用静态队列实现订餐取餐系统
利用静态队列实现订餐取餐系统如题.题主在一次吃肯德基的时候看到餐厅里的订餐取餐系统,突发奇想.联想到最近学习的队列的相关知识,准备动手用静态队列实现一个类似于现代餐厅的订餐取餐系统.由于题主没有学习 ...
一种简单可落地的分布式事务实践方案
欢迎大家关注公众号「JAVA前线」查看更多精彩分享文章,主要包括源码分析.实际应用.架构思维.职场分享.产品思考等等,欢迎大家加我微信「java_front」一起交流学习 1 案例背景用户在电商网站 ...
一张美团外卖的小票看透支付清结算架构！
见字如面,我是军哥! 我很少推荐别人的公众号,因为我能看上的原创公众号并不多,让我主动推荐就更难了. 今天这位朋友叫宇宙,认识有两年了,在支付行业里非常有名气,最近闲着无聊翻了他多篇原创文章之后,我发 ...
扫码点餐系统源码外卖点餐小程序源码点餐APP全套源码
1. 开发语言:JAVA 2. 数据库:MySQL 3. 原生小程序 4. Sass 模式 5. 带调试视频门店独立管理后台,可打包微信小程序,H5,APP,LBS定位附近门店,可导航前往下单,订单 ...
记录--前端小票打印、网页打印
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助一.小票打印目前市面上的小票打印机大多采用的打印指令集为ESC/POS指令,它可以使用ASCII码.十进制.十六进制来控制打印,我们可以 ...
分享商家为什么要做扫码点餐系统_微信小程序点餐系统有什么作用
商家为什么要开通"扫码点餐" 解决服务员不够用的问题. 不怕顾客跑单漏单. 在微信就能管理菜品.查看营业额. 订单小票显示顾客桌号和已点菜品. 可在"附近的小程序&quo ...
016-前端学习-Html\CSS\制作带有二维码的门店订单小票
1.HTML相关 1.1 html是什么: 超文本标记语言,超文本,图片,声音标记: 目录 header 标题,预定义修饰利用html就可以实现原始的页面标签:闭合内容头信息,title,编码 ...

HTML实现取餐小票