开发者学堂课程【移动 Web 前端开发：首页-组合样式】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8411
首页-组合样式
内容介绍
一、商品盒子
二、产品区块
三、组合样式
一、商品盒子
. jd proBox{
margin-top: 10px; 与上边距的距离
box- shadow: 0 0 1px #d8d8d8; 阴影
min-height: 200px;
background: #fff;背景颜色：白色
}
.jd_ proBox pro tit {
height: 34px;
line - height: 34px;
border- bottom: 1px solid #ddd;
}
/*no border*/
.jd_ proBox pro tit.nb{ 没有边框
border- bottom: none ;
}
.jd_ proBox .pro_ tit h3{
position: relative ;
text-indent : 20px;
font-weight :normal; 字体不加粗 normal：原始的默认的
}
.jd_ proBox .pro_ tit h3: before{
content :"" ;
position: absolute ; 此时的absolute肯定不会影响“京东超市”
left : 10px ;
top : 11px ;
width: 3px;
height: 12px;
background:#d8505c;
}
.jd_ proBox .pro_ con[ ]
二、产品区块
<section class="jd_proBox">
<div class="pro_ tit"><h3>京东自营</div>
<div class="pro_ con clearfix" >
<a href="#" class=“w_p50 f_left b_right”><img src=images/cp1.jpg" alt=””/></a>
<a href="#" class=“w_p50 f_right b_bottom”><img src=images/cp2.jpg" alt=””/></a>
<a href="#" class=“w_p50 f_right”><img src=images/cp3.jpg" alt=””/></a>
</div>
</section>
<section class="jd_proBox">
<div class="pro_ tit"><h3>京东超市</div>
<div class="pro_ con clearfix">
<a href="#" class=“w_p50 f_right b_left”><img src=images/cp4.jpg" alt=””/></a>
<a href="#" class=“w_p50 f_left b_bottom”><img src=images/cp5.jpg" alt=””/></a>
<a href="#" class=“w_p50 f_left”><img src=images/cp6.jpg" alt=””/></a>
</section>
<section class="jd_ _proBox”>
<div class="pro_ tit"><h3>京东热门</div>
<div class="pro_ con clearfix">
<a href="#" class=“w_p50 f_left b_right”><img src=images/cp1.jpg" alt=””/></a>
<a href="#" class=“w_p50 f_right b_bottom”><img src=images/cp2.jpg" alt=””/></a>
<a href="#" class=“w_p50 f_right”><img src=images/cp3.jpg" alt=””/></a>
</section>
</div>
三、组合样式
观察图片，总共有三个a包括一张图片。
让左边的格子向左浮动，右边的格子向右浮动。
那么结构是怎样的？答：结构是一个 a 宽度50%，包括一张图片，并且有右边框，；盒子宽度也是50%，此时是下边框。总结一下宽度50%，左边、右边框和下边框。
.w_ p50 {
width: 50%;
}
.w_ p50 img{
display: block;
width:100%;
}
.b_ left {
border-left: 1px solid #ddd ;
}
.b_ right {
border-right: 1px solid #ddd ;
}
.b_ bottom {
border- bottom: 1px solid #ddd ;
}
