HTML实现取餐小票

文章目录

  • 一、整体分析
  • 二、各模块实现代码
    • 1.HTML语句
    • 2.CSS语句
  • 三、运行结果
  • 四、源码


在学习HTML的过程中自己去尝试实现一些小项目,写下来博客记录自己成长的过程,本文利用HTML+CSS在网页实现餐饮小票,该餐饮小票可直接打印,也可以根据需求进行相应的更改,源码以及素材已经全部放到了Gitee仓库中,需要的小伙伴们到仓库自取

仓库地址:https://gitee.com/dream-flight/repository


提示:以下是本篇文章正文内容,下面案例可供参考

本文实现的小票原型:
HTML实现取餐小票_第1张图片

一、整体分析

对于取餐小票来说,文字信息要区分大小并且居中、分割线为虚线、两个table表格(两行三列和两行两列)、二维码图片上方的段落上下方以及段首都要有空格。该小票的整体思路是利用div图层和table表格来实现各个模块,再将各个模块按顺序拼接即可。

图示:
HTML实现取餐小票_第2张图片

二、各模块实现代码

1.HTML语句

代码如下(示例):

		<div>顾客联div>
		<div class="place">请留意您的取餐账单号div>
		<div class="self">自取顾客联div>
		<div>XXX店铺(XXXX分店)div>
		<div>010-123456789div>
		<div class="self">--结账单--div>
		<div class="place">账单号:X000001div>
		<div>账单类型:堂食div>
		<div>人数:2div>
		<div>收银员:张三div>
		<div>开单时间:2021-01-01 18:00:30div>
		<div>结账时间:2021-01-01 18:01:24div>
		
		<hr/>
		<table>
			<tr>
				<td width="50" align="center">数量td>
				<td width="190">品项td>
				<td width="50" align="center">金额td>
			tr>
			<tr>
				<td valign="top">1td>
				<td>玉米肉松蛋饼2片<br>
				2 X --玉米肉松蛋饼<br>
				2 X --现磨豆浆(热/甜)
				td>
				<td valign="top" align="right">8.00td>
			tr>
		table>
		<hr/>
		<table>
			<tr>
				<td width="246">合计td>
				<td width="50" align="right">8.00td>
			tr>
			<tr>
				<td>微支付td>
				<td align="right">8.00td>
			tr>
		table>
		<hr/>
		<div>打印时间:2021-01-01 18:01:40div>
		<hr />
		<div class="note">       根据相关税法规定,电子发票的开票日期同网上申请电子发票的日期,如您需要当日的电子发票请务必在消费当日通过扫描下方二维码,根据指引步骤开具您的增值税电子普通发票。此二维码30天有效,扫描时请保持小票平整。div>
		<div class="picture"><img src="./image/picture.png" width="150px"/>div>
		<div>官网:www.xxxxxxxx.com.cndiv>
		<div>加盟热线:86-21-123456789或86-22-123456789div><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)


三、运行结果

HTML实现取餐小票_第3张图片

四、源码


<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-123456789div>
		<div class="self">--结账单--div>
		<div class="place">账单号:X000001div>
		<div>账单类型:堂食div>
		<div>人数:2div>
		<div>收银员:张三div>
		<div>开单时间:2021-01-01 18:00:30div>
		<div>结账时间:2021-01-01 18:01:24div>
		
		<hr/>
		
		<table>
			<tr>
				<td width="50" align="center">数量td>
				<td width="190">品项td>
				<td width="50" align="center">金额td>
			tr>
			<tr>
				<td valign="top">1td>
				<td>玉米肉松蛋饼2片<br>
				2 X --玉米肉松蛋饼<br>
				2 X --现磨豆浆(热/甜)
				td>
				<td valign="top" align="right">8.00td>
			tr>
		table>
		
		<hr/>
		
		<table>
			<tr>
				<td width="246">合计td>
				<td width="50" align="right">8.00td>
			tr>
			<tr>
				<td>微支付td>
				<td align="right">8.00td>
			tr>
		table>
		
		<hr/>
		
		<div>打印时间:2021-01-01 18:01:40div>
		
		<hr />
		
		<div class="note">       根据相关税法规定,电子发票的开票日期同网上申请电子发票的日期,如您需要当日的电子发票请务必在消费当日通过扫描下方二维码,根据指引步骤开具您的增值税电子普通发票。此二维码30天有效,扫描时请保持小票平整。div>
		
		<div class="picture"><img src="./image/picture.png" width="150px"/>div>
		
		<div>官网:www.xxxxxxxx.com.cndiv>
		<div>加盟热线:86-21-123456789或86-22-123456789div><br>
	body>
html>

以上便是HTML实现餐饮小票的分析过程以及代码实现

你可能感兴趣的:(笔记,html,css)