【小白学前端】化腐朽为神奇-HTML+CSS3实现永和小票（day01-2）

HTML打造永和大王门店小票模板

最新推荐文章于 2021-12-11 09:43:56 发布

原创

最新推荐文章于 2021-12-11 09:43:56 发布 · 828 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #web

功能

实现永和大王门店小票。利用html技术实现永和大王购物小票，连接小票打印机即可实现购物小票的打印。
掌握此技术，基本日常饭店、超市、购物等开具的小票业务都能实现。

界面原型

在这里插入图片描述

源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>永和小票</title>
		<!-- css 全局的样式配置，习惯的位置
			body代表整个页面标签，修饰整个body中字体
		 -->
		<style>
			body{
   
   		/* 标签是直接写的 */
				font-size: 8px; /*字体的大小，8个像素*/
				/* 一般去看一个元素位置，设置它的边线，调试完再去掉 */
				border: 0px solid red;
				width: 290px;
			}
			
			.me{
   
   	 /* class属性公用 */
				padding-left: 90px;
			}
			#please{
   
   
				font-size: 22px; 
				font-weight: bold;
			}
			
			#billId{
   
   
				font-size: 20px;
			}
			.billClass{
   
   
				font-size: 20px;
				color: green;
			}
		</style>
	</