## 一、页面概览
![](http://cndpic.dodoke.com/0b70072384bcd7f11a2b1657c4d68305)
## 二、页面结构
```
<!--购物车区域开始-->
<div class="shop-bar">
<div class="choose-content hide" style="display: block;">
<div class="content-top">
<div class="clear-car">清空购物车</div>
</div>
<div class="choose-item">
<div class="item-name">麦辣鸡翅4块</div>
<div class="price">¥<span class="total">46</span></div>
<div class="select-content">
<div class="minus"></div>
<div class="count">2</div>
<div class="plus"></div>
</div>
</div>
</div>
<div class="bottom-content">
<div class="shop-icon">
<div class="dot-num hide" style="display: block;">2</div>
</div>
<div class="price-content">
<p class="total-price">¥<span class="total-price-span">46</span></p>
<p class="other-price">另需配送 ¥<span class="shipping-fee">9</span></p>
</div>
<div class="submit-btn">去结算</div>
</div>
</div>
<div class="mask hide" style="display: block;"></div>
<!--购物车区域结束-->
```
## 三、页面样式
```
.shop-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
}
.shop-bar .bottom-content {
height: 1.333333rem;
display: flex;
background-color: rgba(51,51,51,0.9);
}
.shop-bar .shop-icon {
width: 1.466667rem;
height: 1.466667rem;
background-image: url('../img/shop-icon.png');
background-size: cover;
margin-top: -0.4rem;
margin-left: 0.32rem;
position: relative;
}
.shop-bar .price-content {
flex: 1;
padding-top: 0.213333rem;
padding-left: 0.186667rem;
}
.shop-bar .total-price {
font-size: 0.533333rem;
color: #fff;
}
.shop-bar .other-price {
font-size: 0.32rem;
color: #999;
margin-top: 0.053333rem;
}
.shop-bar .dot-num {
position: absolute;
background-color: #fb4e44;
width: 0.4rem;
height: 0.4rem;
font-size: 0.32rem;
color: #fff;
border: 1px solid #fff;
border-radius: 50%;
right: 0;
top: 0.053333rem;
text-align: center;
line-height: 0.4rem;
}
.shop-bar .submit-btn {
width: 2.933333rem;
height: 100%;
background-color: #ffd161;
color: #333;
font-size: 0.426667rem;
line-height: 1.333333rem;
text-align: center;
}
.choose-content {
background-color: #fff;
}
.choose-content .content-top {
height: 0.933333rem;
background-color: #f4f4f4;
font-size: 0.293333rem;
display: flex;
align-items: center;
justify-content: flex-end;
}
.choose-content .clear-car {
margin-left: 0.266667rem;
margin-right: 0.133333rem;
float: left;
position: relative;
}
.choose-content .clear-car::after {
content: ' ';
width: 0.346667rem;
height: 0.346667rem;
display: block;
background-image: url('../img/clear.jpeg');
background-size: cover;
position: absolute;
top: -0.026667rem;
left: -0.373333rem;
}
.choose-content .choose-item {
display: flex;
font-size: 0.4rem;
color: #2f2f2f;
height: 0.933333rem;
align-items: center;
padding-top: 0.266667rem;
padding-bottom: 0.266667rem;
border-bottom: 1px solid #ddd;
}
.choose-content .choose-item .price {
margin-left: 0.133333rem;
margin-right: 0.666667rem;
}
.choose-content .choose-item .item-name {
flex: 1;
padding-left: 0.266667rem;
}
.choose-content .select-content {
position: relative;
margin-right: 0.213333rem;
display: flex;
}
.choose-content .plus {
width: 0.666667rem;
height: 0.666667rem;
background-image: url('../img/plus.png');
background-size: cover;
}
.choose-content .minus {
width: 0.666667rem;
height: 0.666667rem;
background-image: url('../img/minus.png');
background-size: cover;
}
.choose-content .count {
font-size: 0.4rem;
color: #2f2f2f;
width: 0.666667rem;
height: 0.666667rem;
line-height: 0.666667rem;
margin-left: 0.053333rem;
margin-right: 0.053333rem;
text-align: center;
}
.mask {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: rgba(0,0,0,0.7);
}
```
## 四、本节作业
* 实现点击左下角购物车图标切换显示购物车内容和隐藏掩膜 mask 层。
* 实现点击加减按钮修改购物车物品。
- 第一章:移动开发入门
- 第一节:概述
- 第二节:基础概念
- 第一课时:像素
- 第二课时:视口
- 第二章:Flex 布局
- 第一节:概述
- 第二节:容器属性
- 第一课时:flex-direction 属性
- 第二课时:flex-wrap 属性
- 第三课时:flex-flow 属性
- 第四课时:justify-content 属性
- 第五课时:align-items 属性
- 第六课时:align-content 属性
- 第三节:项目属性
- 第一课时:order 属性
- 第二课时:flex-grow 属性
- 第三课时:flex-shrink 属性
- 第四课时:flex-basis 属性
- 第五课时:flex 属性
- 第六课时:align-self 属性
- 第四节:Flex 实例
- 第一课时:常见页面布局
- 第三章:响应式布局
- 第一节:概述
- 第二节:媒体查询
- 第一课时:概述
- 第二课时:响应式设计
- 第三节:栅格系统
- 第一课时:概述
- 第二课时:案例分析
- 第三课时:Bootstrap 简介
- 第四节:响应式案例
- 第一课时:三星首页
- 第四章:移动端适配
- 第五章:移动端事件
- 第一节:概述
- 第二节:touch 事件
- 第三节:触摸事件对象
- 第四节:其他事件
- 第五节:移动端幻灯片
- 第六章:移动端常见问题
- 第一节:浏览器兼容性
- 第二节:移动端动画
- 第三节:300ms 延迟
- 第四节:文字溢出省略
- 第五节:水平居中和垂直居中
- 第七章:项目案例
- 第一节:美团外卖
- 第一课时:首页
- 第二课时:订单页面
- 第三课时:我的页面
- 第四课时:详情页面
- 第五课时:购物车页