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

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）在样式设计过程中不断抽取公共类样式