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

学习目标/Target

使用flex弹性盒布局模型快速开发网页
- 体会flex弹性盒布局的应用
- 扎实flex弹性盒布局的知识点

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

1.1 项目分析

01-01

准备工作：

设计稿（PSD)导入——像素大厨——设计图：2x
素材：图片：切图
字体图标：从阿里巴巴第三方平台下载——解压
案例目录及文件建立

1.2 建立目录

xiaotuxian
- images
- uploads
  - 产品图片
- lib——第三方框架如（bootstrap)
  - iconfont
- .html页面文件
- css文件夹
  - .css样式文件
  - base.css

01-02-01

01-02-02

1.3 页面初始化


1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>确认订单</title>
7
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
8
    <link rel="stylesheet" href="./css/base.css">
9
    <link rel="stylesheet" href="./css/orders.css">
10
</head>

小结

2. 页面整体-布局（15‘+10’）

2.1 页面整体分析

02-01


xxxxxxxxxx
4
1
 <!-- 主体内容: 滑动查看 -->
2
<div class="main"></div>
3
 <!-- 底部支付: 固定定位 -->
4
<div class="pay"></div>

2.2 主体内容-滑动查看

2.2.1 html结构部分


xxxxxxxxxx
2
1
 <!-- 主体内容: 滑动查看 -->
2
<div class="main">1</div>

2.2.2 CSS样式部分


xxxxxxxxxx
8
1
body {
2
    background-color: #f7f7f8;
3
}
4
/* 主体内容 */
5
.main {
6
    /* 底部80px: 为了内容不被底部区域盖住 */
7
    padding: 12px 11px 80px;
8
}

2.3 底部支付-固定定位

2.3.1 html结构部分


xxxxxxxxxx
1
1
<div class="pay">2</div>

2.3.2 css样式部分


x
1
/* 底部支付 */
2
.pay {
3
    position: fixed;
4
    left: 0;
5
    bottom: 0;
6
7
    width: 100%;
8
    height: 80px;
9
10
    background-color: pink; 
11
    border-top: 1px solid #ededed;
12
}

02-03

小结

3. 底部支付-布局（10’+5’）

03-01

3.1 底部支付-整体布局

3.1.1 html结构部分

划分为左、右二部分，


xxxxxxxxxx
4
1
<div class="pay">
2
  <div class="left">L</div>
3
  <div class="right">R</div>
4
</div>

3.1.2 css样式部分

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


xxxxxxxxxx
3
1
    display:flex;
2
    justify-content: space-between;
3
    padding:0 10px;

结果：

03-02

然后，实现垂直对齐：

【思考】用哪个？

03-03


xxxxxxxxxx
1
1
align-items: center;

小结

3.2 底部支付-左侧制作

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

3.2.1 html结构部分


xxxxxxxxxx
3
1
<div class="left">
2
    合计：<span>￥<i>266.00</i></span>
3
</div>

3.2.2 css样式部分


xxxxxxxxxx
6
1
.pay .left{
2
  font-size: 12px;
3
}
4
.pay .left i{
5
  font-size: 20px;
6
}

3.2.3 css公共样式追加

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


xxxxxxxxxx
4
1
./* 公共样式 */
2
.red{
3
  color: #cf4444;
4
}

然后，span标签应用上：


xxxxxxxxxx
1
1
合计：<span class="red">￥<i>266.00</i></span>

03-04

小结

3.3 底部支付-右侧制作

3.3.1 html结构部分


xxxxxxxxxx
3
1
<div class="right">
2
  <a href="">去支付</a>
3
</div>

3.3.2 css样式部分


xxxxxxxxxx
14
1
.pay .right a {
2
  display: block;
3
  width: 90px;
4
  height: 35px;
5
  background-image: linear-gradient(90deg, 
6
    #6fc2aa 5%, 
7
    #54b196 100%);
8
  border-radius: 3px;
9
  text-align: center;
10
  line-height: 35px;
11
  font-size: 13px;
12
  color: #fff;
13
 
14
}

03-05

小结

4. 用户信息-布局（10’+5’）

4.1 用户信息-整体-布局

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

白背景
外边距
圆角

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


xxxxxxxxxx
5
1
.pannel{
2
  margin-bottom: 10px;
3
  background: #fff;
4
  border-radius: 5px;
5
}

第二步：应用样式


xxxxxxxxxx
3
1
<div class="main">
2
  <div class="pannel user-msg">1</div>
3
</div>

感应区：44*44

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


xxxxxxxxxx
4
1
/* 用户信息 */
2
.user-msg{
3
  padding:15px 0 12px 11px;
4
}

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


xxxxxxxxxx
6
1
     <div class="pannel user-msg">
2
        <div class="location">1</div>
3
        <div class="user">2</div>
4
        <div class="more">3</div>
5
      </div>
6
    </div>

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


xxxxxxxxxx
1
1
  display: flex;

04-02

4.2 用户信息-内容-布局

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


xxxxxxxxxx
9
1
<div class="pannel user-msg">
2
  <div class="location">
3
    <i class="iconfont icon-location"></i>
4
  </div>
5
  <div class="user">2</div>
6
  <div class="more">
7
    <i class="iconfont icon-more"></i>
8
  </div>
9
</div>

第二步：设置.location样式


xxxxxxxxxx
12
1
.user-msg .location{
2
  width: 30px;
3
  height: 30px;
4
  margin-right:10px;
5
  background-image: linear-gradient(90deg, 
6
    #6fc2aa 5%, 
7
    #54b196 100%);
8
  border-radius: 50%;
9
  text-align: center;
10
  line-height: 30px;
11
  color: #fff;
12
}

第三步：设置.more样式


xxxxxxxxxx
8
1
.user-msg .more{
2
  width: 44px;
3
  height: 44px;
4
  background: pink;
5
  text-align: center;
6
  line-height: 44px;
7
  color: #000;
8
}

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


xxxxxxxxxx
3
1
.user-msg .user{
2
  flex: 1;
3
}

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


xxxxxxxxxx
1
1
align-items: center;

04-03

4.3 用户信息-文本内容

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


xxxxxxxxxx
6
1
<div class="user">
2
  <div class="top">
3
    <h4>林丽</h4>
4
    <p>18500667882</p>
5
  </div>
6
</div>

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


xxxxxxxxxx
3
1
.user-msg .user .top{
2
  display: flex;
3
}

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


xxxxxxxxxx
3
1
.user-msg .user .top h4{
2
  width: 55px;
3
}

04-05

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


xxxxxxxxxx
3
1
 <div class="bottom">
2
  北京市  海淀区  中关村软件园   信息科技大厦1号楼410# 
3
 </div>

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


xxxxxxxxxx
4
1
.user-msg .user .bottom{
2
  margin-top: 5px;
3
  font-size: 12px;  
4
}

04-06

小结

5. 商品信息-布局（10’+5’）

5.1 商品信息-整体布局

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


xxxxxxxxxx
1
1
 <div class="pannel goods">1</div>

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


xxxxxxxxxx
3
1
.user-msg .goods{
2
  padding: 11px 0 11px 11px;
3
}

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


xxxxxxxxxx
5
1
<div class="pannel goods">
2
  <div class="pic">1</div>
3
  <div class="info">2</div>
4
  <div class="count">*1</div>
5
</div>

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


xxxxxxxxxx
1
1
display: flex;

5.2 商品信息-图片

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


xxxxxxxxxx
3
1
 <div class="pic">
2
      <a href="#"><img src="uploads/pic.png" alt=""></a>
3
</div>

05-01

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


xxxxxxxxxx
6
1
.goods .pic{
2
  margin-right: 10px;
3
  width: 85px;
4
  height: 85px;
5
  border-radius: 2px;
6
}

5.3 商品信息-数量

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


xxxxxxxxxx
3
1
.goods .info{
2
  flex: 1;
3
}

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


xxxxxxxxxx
7
1
.goods .count{
2
  width: 44px;
3
  height: 44px;
4
  background: pink;
5
  text-align: center;
6
  line-height: 44px;
7
}

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


xxxxxxxxxx
4
1
<div class="count">
2
  <i class="iconfont icon-x"></i>
3
  <span>1</span>
4
</div>

05-02

5.4 商品信息-文本内容

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


xxxxxxxxxx
13
1
<div class="info">
2
3
     <h4>康尔贝 非接触式红外体温仪
4
       领券立减30元 婴儿级材质 测温…</h4>
5
       
6
     <p><span>粉色</span><span>红外体温计</span></p>
7
     
8
      <div class="price">
9
            <span class="red">￥<i class="new">266</i></span>
10
            <span>￥<i class="old">299</i></span>
11
      </div>
12
     
13
</div>

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


xxxxxxxxxx
5
1
.goods .info h4{
2
  font-size: 13px;
3
  font-weight: normal;
4
  color: #262626;
5
}

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


xxxxxxxxxx
16
1
.goods .info p{
2
  margin: 5px 0;
3
  padding: 3px 4px;
4
  width: 110px;
5
  background-color: #f7f7f8;
6
  border-radius: 2px;
7
  text-align: center;
8
  line-height: 16px;
9
}
10
.goods .info p span{
11
  font-size: 11px;
12
  color: #888;
13
}
14
.goods .info p span:first-child{
15
  margin-right: 10px;
16
}

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


xxxxxxxxxx
1
1
<span class="red">￥<i>266</i></span>

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


xxxxxxxxxx
15
1
.goods .info .price {
2
  font-size: 9px;
3
}
4
.goods .info .price .new {
5
  font-size: 16px;
6
}
7
.goods .info .price .old {
8
  font-size: 12px;
9
}
10
.goods .info .price span:nth-child(2){
11
  text-decoration: line-through;
12
  margin-left: 10px;
13
  color: #999;
14
}
15

05-03

小结

6. 配送方式+支付方式

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

第一步：设置html结构


xxxxxxxxxx
14
1
      <section class="pannel rest">
2
        <div>
3
          <h4>配放方式</h4>
4
          <p>顺丰快递</p>
5
        </div>
6
        <div>
7
          <h4>买家备注</h4>
8
          <p>希望可以尽快发货，谢谢~</p>
9
        </div>
10
        <div>
11
          <h4>支付方式</h4>
12
          <p>支付宝<i class="iconfont icon-more"></i></p>
13
        </div>
14
      </section>

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


xxxxxxxxxx
7
1
/* 其他信息 */
2
.rest{
3
  padding: 15px;
4
}
5
.rest div{
6
  display: flex;
7
}

06-01

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


xxxxxxxxxx
15
1
/* 方法一： */
2
.rest div{
3
  display: flex;
4
  justify-content: space-between;
5
}
6
.rest div:nth-child(2){
7
  justify-content: flex-start;
8
}
9
/* 方法二： */
10
/* .rest div{
11
  display: flex;
12
}
13
.rest div:nth-child(2n-1){
14
  justify-content: space-between;
15
} */

06-02

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


xxxxxxxxxx
23
1
.rest h4,
2
.rest p{
3
  font-size: 13px;
4
  font-weight: normal;
5
  color: #262626;
6
}
7
.rest div:nth-child(2) h4{
8
  margin-right: 20px;
9
}
10
.rest div:nth-child(2) p{
11
  font-size: 12px;
12
  color: #999;
13
}
14
.rest i{
15
  font-size: 11px;
16
  color: #808080;
17
}
18
.rest div{
19
  margin-bottom: 30px;
20
}
21
.rest div:last-child{
22
  margin-bottom: 0px;
23
}

06-03

问：以上代码可不可以优化整合？？？

7 总价+运费+折扣

第一步：复制html结构


xxxxxxxxxx
16
1
 <!-- 其他信息：总价+运费+折扣 -->
2
       <section class="pannel rest">
3
        <div>
4
          <h4>商品总价</h4>
5
          <p>￥299.00</p>
6
        </div>
7
        <div>
8
          <h4>运费</h4>
9
          <p>￥0.00</p>
10
        </div>
11
        <div>
12
          <h4>折扣</h4>
13
          <p>￥-30.00</p>
14
        </div>
15
      </section>
16
 <!-- 其他信息：总价+运费+折扣 -->

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

思考：怎么办？还有别的办法没？


xxxxxxxxxx
10
1
section:last-child.rest div:nth-child(2){
2
  justify-content: space-between;
3
}
4
section:last-child.rest div:nth-child(2) p{
5
  font-size: 13px;
6
  color: #262626;
7
}
8
section:last-child.rest div:nth-child(3) p{
9
  color: red;
10
}

06-04

8.整体完成效果

【复习与巩固】

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