开发者学堂课程【移动 Web 前端开发:首页-组合样式】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/594/detail/8411
首页-组合样式
内容介绍
一、商品盒子
二、产品区块
三、组合样式
一、商品盒子
. jd proBox
{
margin-top: 10px;
与上边距的距离
b
ox- 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:
3
px;
height:
12
px;
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 ;
}