016-前端学习-Html\CSS\制作带有二维码的门店订单小票

最新推荐文章于 2024-05-31 23:20:48 发布

网小鱼的学习笔记

最新推荐文章于 2024-05-31 23:20:48 发布

阅读量837

点赞数 2

分类专栏： WEB 前端文章标签： html web css markdown javascript

本文链接：https://blog.csdn.net/m0_55284524/article/details/115596267

版权

WEB 前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.HTML相关

1.1 html是什么：

超文本标记语言，超文本，图片，声音
标记：

css是什么

Cascading Style Sheets是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

页面布局方式

早起习惯用table表格布局

表格表格内容的行

表格头的行
单元格特点：不需要写排班，会自适应缺点：门户网站 2. List item

早期的都是table布局，当所有标签，必须解析完，才在页面展现，会闪现一下

现如今习惯用div块布局
把大页面拆成小块，每个小块独立出来，加载方便
div+css可以实现没有页面闪现的快速展现

二维码

里面有很多信息，把文字隐藏在这些小块中，通过它可以定位到图片的正确比例，把这些块组成形成文字。
https://blog.csdn.net/m0_55284524/article/details/115415627，收集扫描二维码，获取到上面的文字，手机浏览会自动打开这个网页，谷歌API拒实现二维码图片生成，根据开发者给的文字（链接）生成它的图片
谷歌API非常繁琐，封装它的方法和参数，封装后，4个参数：宽、高、链接、图片位置

开发步骤：

创建普通java工程
创建一个lib目录
导入jar
创建类，main，creatQR.make()4个参数
把这个qr.png拷贝到order.heml目录中，就可以访问了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>肯德基小票</title>
		<!--css全局的样式配置，习惯的位置
		-body代表整个页面的字体统一缩小--->
		<style>
			body{
				font-size: 8px; 
				border: 0px solid red;
				width: 290px;
			}
			
			.method{/*class属性共用*/
				padding-left: 90px;
			}
			.method2{
				font-size: 22px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div>顾客联</div>
		<div class="method2">请您留意取餐账号单</div>
		<div class="method">自取顾客联</div>
		

		<div>肯德基凤城五路店</div>
		<div>021-2222222</div>
		
		<div class="method">---结账单---</div>
		<div class="method2">账单号：23456789</div>
		<div>账单类型：堂食</div>
		<div>人数：1人</div>
		<div>收银员：张无忌</div>
		<div>开单时间：2022-2-22 09：09：09</div>
		<div>结账时间：2022-2-22 09：09：10</div>
		
		
		<hr style="border: 1px dashed;"/>
		<table border="1">
			<tr>
				<th width="30" align="center">数量</td>
				<th width="150" align="center">品类</td>
				<th width="50" align="center">金额</td>
			</tr>
			<tr>
				<td valign="top" align="center">1</td>
				<td align="center">墨西哥卷饼套餐 <br />
				1X  ----墨西哥卷饼<br />
				1X  ----现磨咖啡(半糖、热)
				</td>	
				<td valign="top" align="center">18.00</td>	
			</tr>
		</table>
		
		<table border="1">
			<tr>
			<td width="30">合计</td>	
			<td width="200" align="center">总金额：18.00</td>
			</tr>
			<tr>
				<td>微支付</td>
				<td align="center">18.00</td>
			</tr>
		</table>
		
		<hr style="border: 1px dashed;" />
		打印时间：2022-2-22  09:09:19
		<hr style="border: 1px dashed;" />
		<div style="padding-top: 15px;">
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。</div>
		<img src ="img/qr.png" style="padding-left: 100px;"/>
		<div>
			www.kendeji.com
		</div>
		<div>
			加盟电话：012-12345678
		</div>
		<br />
		<br />
	</body>
</html>

展示效果如下图：
在这里插入图片描述

图片插入路径的两种方式

绝对路径（直接访问网上图片）
相对路径

小结

做网站必备两项技能

HTML：超文本标记语言，利用规定标签，浏览器会解析这些标签，最终展现在页面
CSS：样式表，美化页面

网小鱼的学习笔记

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
016-前端学习-Html\CSS\制作带有二维码的门店订单小票

1.HTML相关1.1 html是什么：超文本标记语言，超文本，图片，声音标记：目录 header 标题，预定义修饰利用html就可以实现原始的页面标签：闭合内容头信息，title，编码utf-8，安全信息token小图标，加入外部演示表cssHTML是纯文本，任何的文本编辑器都可以实现，专业工具：hbuilderx/vs-codeHbuilder浏览器html页面有两种方式1）创建html，浏览器浏览—绝对路径访问，磁盘路径2）独有，启动一个web服务（自己运行），在启动node
复制链接

扫一扫