黑马商城项目_商品展示样式设计

1、公共部分设计

样式选择器，两个类的名称写在一起，相当于并且的关系。比如：

.product_box_tit.no_border之间没有空格，有空格表示后代关系。

.hm_product{
padding: 0 0.05rem;
}
.hm_product > .product_box{
width: 100%;
background: #fff;
margin-top: 0.10rem;
box-shadow:0 0 1px #e0e0e0;
}
.hm_product > .product_box > .product_box_tit{
height: 0.32rem;
line-height: 0.32rem;
border-bottom: 1px solid #e0e0e0;
}
.hm_product > .product_box > .product_box_tit.no_border{
border-bottom: none;
}

2、秒杀

秒杀容器中又添加hm_sk类，便于对秒杀部分单独设计

（1）秒表图标

.hm_sk .sk_icon{
background: url("../images/seckill-icon.png") no-repeat;
background-size: 0.16rem 0.20rem;
width: 0.16rem;
height: 0.20rem;
float: left;
margin-top: 0.06rem;
}

（2）秒杀title

.hm_sk .sk_name{
color: #d8505c;
font-size: 0.15rem;
float: left;
}

（3）秒杀倒计时

.hm_sk .sk_time{
float: left;
margin-top:0.08rem;
}
.hm_sk .sk_time > span{
float: left;
width: 0.15rem;
height: 0.15rem;
line-height: 0.15rem;
text-align: center;
background: #333;
color: #fff;
margin-left: 0.03rem;
font-size: 0.12rem;
}
.hm_sk .sk_time > span:nth-child(3n){
background: #fff;
color: #333;
width: 0.05rem;
}

（4）秒杀商品价格的删除线

.hm_sk .product_box_con > ul > li >p:first-of-type{
color: #d8505c;
padding-top: 0.05rem;
}
.hm_sk .product_box_con > ul > li >p:last-of-type{
text-decoration: line-through;/*删除线*/
color: #666;
padding-top: 0.05rem;
}

3、公共样式类

/* common css */
.f_left{
float: left;
}
.f_right{
float: right;
}
.clearfix::before,
.clearfix::after{
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}

[class^="icon_"]{
background: url("../images/sprites.png") no-repeat;
background-size: 2rem 2rem;
}

.m_l10{
margin-left: 10px;
}
.m_r10{
margin-right: 10px;
}
.m_b10{
margin-bottom: 10px;
}
.m_t10{
margin-top: 10px;
}
/*组合样式*/
.w_50{
width: 50%;
display: block;
}
.w_50 > img{
display: block;
width: 100%;
}

.b_left{
border-left: 1px solid #e0e0e0;
}
.b_right{
border-right: 1px solid #e0e0e0;
}
.b_bottom{
border-bottom: 1px solid #e0e0e0;
}

3、总结

（1）先抽取公共部分样式：秒杀区和普通商品展示区

（2）在定义样式时，秒杀部分可以用新定义类名称进行区格

（3）在样式设计过程中不断抽取公共类样式