【Flex-实战演练】确认订单

学习目标/Target

 

1. 项目分析及准备工作(10’+5’)

1.1 项目分析

01-01

准备工作:

1.2 建立目录

01-02-01

01-02-02

1.3 页面初始化

小结

 

2. 页面整体-布局(15‘+10’)

2.1 页面整体分析

02-01

 

2.2 主体内容-滑动查看

2.2.1 html结构部分

2.2.2 CSS样式部分

2.3 底部支付-固定定位

2.3.1 html结构部分

2.3.2 css样式部分

02-03

小结

3. 底部支付-布局(10’+5’)

03-01

3.1 底部支付-整体布局

3.1.1 html结构部分

划分为左、右二部分,

3.1.2 css样式部分

追加.pay弹性盒子相关属性,首先实现两端对齐:

结果:

03-02

然后,实现垂直对齐:

【思考】用哪个?

03-03

小结

3.2 底部支付-左侧制作

分析:因为价格数据来源数据库,所以,需要添加标签。

3.2.1 html结构部分

3.2.2 css样式部分

3.2.3 css公共样式追加

因为整个页面有红色的字,所以,整体追加

然后,span标签应用上:

03-04

小结

3.3 底部支付-右侧制作

3.3.1 html结构部分

3.3.2 css样式部分

03-05

小结

4. 用户信息-布局(10’+5’)

4.1 用户信息-整体-布局

分析:主体内容区域的共同样式

第一步:设置.pannel公共样式

第二步:应用样式

感应区:44*44

第三步:追加用户信息的内边距

第四步:将用户信息内容分为三个部分

第五步:将项目沿主轴水平排列——flex

04-02

 

4.2 用户信息-内容-布局

第一步:将iconfont字体图标添加到项目1和项目3里

第二步:设置.location样式

第三步:设置.more样式

第四步:设置中间文本内容

第五步:补足侧轴方向垂直居中

04-03

4.3 用户信息-文本内容

第一步:设置姓名和手机号html结构

第二步:将二个项目内容水平排列——flex

第三步:调整姓名与手机号之间的距离

04-05

第四步:设置地址文本内容的html结构

第五步:设置地址文本内容的css样式

04-06

小结

5. 商品信息-布局(10’+5’)

5.1 商品信息-整体布局

第一步:设置商品信息整体html结构

第二步:设置商品信息的内边距

第三步:设置商品信息三个项目的html结构

第四步:商品信息项目三个项目的水平排列

5.2 商品信息-图片

第一步:设置商品图片的html结构

05-01

第二步:限制商品图的宽度、高度;设置圆角边框

5.3 商品信息-数量

第一步:先将中间信息部分增长

第二步:设置数量的响应区域及文本样式

第三步:将*号转换为字体图标,将数字1加标签

05-02

5.4 商品信息-文本内容

第一步:设置文本内容相关html结构

第二步:设置文本内容-产品名称-css样式

第三步:设置文本内容-产品属性-css样式

第四步:设置现价格应用公共样式的红色

第五步:设置现价与原价样式

05-03

小结

6. 配送方式+支付方式

6.1 配送方式+支付方式-布局

第一步:设置html结构

第二步:设置弹性盒子容器-解决水平排列

06-01

第三步:设置弹性盒子项目,解决两端对齐

06-02

6.2 配送方式+支付方式-内容

06-03

 

问:以上代码可不可以优化整合???

7 总价+运费+折扣

第一步:复制html结构

第二步:利用CSS层叠性覆盖之前的样式

思考:怎么办?还有别的办法没?

06-04

 

8.整体完成效果

08

 

【复习与巩固】

  1. 练习到——能独立书写综合案例(关键代码要有注释)
  2. 必须xmind梳理今日知识点 (md 笔记也行)
  3. 下次上课前完成问卷星测试题
  4. 做每日反馈,复盘知识吸收程度
  5. 预习下次课程内容
  6. 有能力的同学,制作淘宝支付页面