武职301-day01

实现永和小票页面

效果图

问题分析

把一个大的开发任务，先进行任务分析，把完成这个任务需要的技术点和开发步骤写出来。

开发分析

特点：
html+css实现
1）小票有宽度限制
2）字体大小不一样，大部分字体大小相同，有个别字体比较大
3）有部分的内容居左，部分的内容居中
4）表格


5) 虚线
6）规定段落前面2个中文字空白（ ；）
7）图片

开发步骤

1, 创建工作空间目录
d:/workspace，存放我们后面开发文件
2，创建env，它用于java环境配置，例如：maven
3，创建vue，主流前端框架Vue，前端代码
4，创建java，后端代码

2，新建order.html文件

创建order.html
选择上面创建在workspace/vue

order.html页面

	
		
		
		
	
	
		
顾客联
		
请您留意取餐账单号
		
自取顾客联
		
永和大王（北三环西路店）
		
010-62112313
		
--结账单--
		
账单号：P000009
		
		
账单类型：堂食
		
人数：1
		
收银员：张静
		
开单时间：2023-06-12 07:24:11
		
结账时间：2023-06-12 07:24:22
		

		
		

			

				
数量
				
品项
				
金额
			
			

				
1
				
油条豆浆套餐

					1X --非矾油条

					1X --现磨豆浆（热/甜）
				
				
7.00
			
		
		

		
		

			

				
支付宝花呗一元早餐      1
				
-3.00
			
			

				
合计
				
4.00
			
			

				
支付宝
				
1.00
			
			

				
支付宝补贴
				
3.00
			
		
		
		

		
打印时间：2023-06-11 07:24:23
		

		
		
根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。
		
		
		
		
		
官网：www.yonghe.com.cn
		
加盟热线：86-21-12345678 或 86-21-12345678
	

问题：HTML代码和CSS样式代码混杂在一起

少量代码混杂问题不大，习惯容忍。但是如果过多，不利于读程。
形成专用样式表文件base.css，文件后缀.css，它只放样式内容。形成样式从Html网页中剥离，看着结构清晰，代码量少，样式公用，后期代码方便维护。

网页中使用样式style修饰常用2种方式

1、直接在html在标签上使用样式
2、把页面用到在样式放在就不公用stylesheet样式表文件中，.css
a. base.css
b. 在html页面在heads标签中。引用样式表

自定义样式表

样式表和页面如何配合？页面怎么设定在样式
1、直接标签：，样式：body{}
2、标签的id名称一致：

id只能整个页面唯一值，样式：#name{}
3、标签的class名称一致：

class可以多个值，样式：.title{}

base.css

body{
width: 280px;
font-size: 10px;
}

hr{
border: 1px dashed;
}

.please{
font-size: 22px;
}

.self{
padding-left: 80px;
}

#note{
text-indent: 2em;
}

作业

1、完成order.html和base.css，实现静态页面代码和样式分离，完成永和小票
2、安装环境
a）node，一路next即可。
b）idea，安装配置。