开发者学堂课程【移动 Web 前端开发：产品-优惠券-布局】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8467
产品-优惠券-布局
产品中优惠券的布局的操作示例
便签下还有需要切换的内容：优惠券
优惠券的排列：
大屏设备一行排列了3个优惠券标签
示意图：
中屏设备而一行排列了三个优惠券标签
小屏设备一行排列了两个优惠券标签
超小屏设备一行排列了一个优惠券标签
如果需要完成此页面的设置，则需要完成响应式的操作系统。
示例代码：
<div>
<div class="tab-content">
<div class="tab-pane active" id="wjs_product_tab01">
<! --大中3小2超小1--> //需要完成一个大屏中屏为三格，小屏为两格，超小屏为一格的操作系统
<div class="col-md-4 col-sm-6 col-xs-12"> //满足大屏、中屏为3格，小屏为两格，超小屏为一格的操作系统，需要创建4个相同的布局。
实现效果如下：
大屏、中屏设备效果如下图：
小屏设备效果如下图：
超小屏设备效果如下图：
布局已经创建成功，只需要往布局中添加内容即可。
每一个布局的容器都有一个固定的高度，下方以及右方都包含阴影，宽度根据栅格系统的宽度进行改变。
<a class="product_box" href="#”> //需要由a包裹div中所有的内容
//将鼠标放置页面处，所有内容都是可进行点击的状态
//每一个格子都需要包含一个a容器，页面拥有四个格子则需包含四个a容器
<div class=”box_right”> //添加容器中右边部分的内容布局
//首先渲染浮动元素，再渲染块级元素，则浮动元素优先显示
//容器中的左右两边部分中还包含着一部分内容
/*内容部分*/
<!--浮动的盒子优先显示--> //渲染的顺序会影响内容的浮动效果
</div>
//此容器是一个块级元素
//块级元素会默认占满整行
//当已经提前拥有一个块级元素，占满了整行，浮动元素不会将内容浮动到底部，它会根据之前设置的位置，跟随之前的位置做浮动调整
//所有容器的结构都应该按照此结构进行排列
<div class=”box_left”> //添加容器中左边部分的内容布局
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a class="product_box" href="#”>
<div class=”box_right”>
</div>
<div class=”box_left”>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a class="product_box" href="#”>
<div class=”box_right”>
</div>
<div class=”box_left”>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a class="product_box" href="#”>
<div class=”box_right”>
</div>
<div class=”box_left”>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">2</div>
<div class="col-md-4 col-sm-6 col-xs-12">3</div>
<div class="col-md-4 col-sm-6 col-xs-12">4</div>
</div>
<div class="tab-pane" id="wjs_product_tab02">2</div>
<div class="tab-pane" id="wjs_product_tab03">3</div>
<div class="tab-pane" id="wjs_product_tabe4">4</div>
<div class="tab-pane" id="wjs_product_tabe5">5</div>
<div class="tab-pane" id="wjs_product_tabe6">6</div>
<div class="tab-pane" id="wjs_product_tabe7">7</div>
</ div>
.wjs_product .nav-tabs-parent{
width: 100%;
overflow: hidden;
}
//对 product 进行修饰
/*产品盒子*/.product_box{ //首先描述格子
width: 100%; //宽度
height: 150px; //高度
display: block;
background: #fff; //默认背景颜色为白色
margin-top: 20px; //将每个容器进行分隔
box-shadow: 3px 3px 5px #d8d8d8; //给每一个容器设置偏移的阴影、模糊数以及颜色。
}
.product_box.active{
background : #e92322; //背景颜色
}
将容器布局后效果如下图：
容器中需要添加两部分的内容，如图所示：
此内容，左边内容部分的宽度随着屏幕宽度的改变，进行自适应的变化，右边内容部分的宽度不随着屏幕宽度的变化而变化，一直保持不变的状态。
在编写一个容器时，如果需要左边进行自适应变化，右边一直保持不变，则需要给左边内容添加浮动效果。
.product_box .box_left{
overflow:hidden; //添加浮动
}
.product_box .box_right{
width:80px; //设置宽度
height:100%; //高度与容器保持一直
background:pink; //背景颜色
float:right; //为容器右边部分的内容添加浮动效果
}
//如果将内容放置至左边内容中，将容器中左右布局对调则不会发生错误。
布局成功后效果如下：
