开发者学堂课程【移动 Web 前端开发：产品-优惠券-左侧内容】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8470
产品-优惠券-左侧内容
目录：
一．做出左边部分
二．做出左上角的“体验”
一．做出左边部分
Ø 进入 index.html
”box_left”>
新手体验标1002期
”col-xs-6”>
起投金额
0.01万
”col-xs-6”>
起投金额
0.01万
”col-xs-6 text-right”>
起投金额
0.01万
”col-xs-6”>
起投金额
0.01万
”col-xs-6 text-right”>
起投金额
0.01万
Ø 进入 index.css 修改样式：
.product_box .box_left{
overflow:hidden;
}
.product_box .box_left h3{
font-size:16px;
text-align:center;
margin-top:10px;
}
.product_box .box_left div{
font-size:12px;
}
Ø 在 readme.md 中做好笔记：
text-right：向右对齐；
text-left:向左对齐；
text-center:居中；
Ø 由于每个盒子中的内容相同，所以我们可以，直接复制站贴到其它几个 box_left 中
Ø 修改 css 中的代码：
.product_box.active .box_left{
color:#f5f5f5;
}
二．制作左上角的“体验”：
Ø 在 css 中，添加代码：
.product_box.active {
background:#e92322;
position:relative;
}
.product_box.active：：bdfore{
content:”\e915”;
position:absolute;
left:0;
top:-7px;
font-family:wjs_font_icon;
color:#fff;
font-size:33px;
}
