淘宝新旺铺宝贝推荐模块CSS定义详解

宝贝推荐模块CSS定义规范一（我一直采用less的方式写CSS，觉得这样很方便）

宝贝推荐模块的基本结构如下

.tshop-pbsm-shop-item-recommend {
    //模块顶部
    .skin-box-tp  {}
    
    //模块标题
    .skin-box-hd {}
    
    //模块主体
    .skin-box-bd {}
    
    //模块结尾
    .skin-box-bt {}
}

 

一般，为了保持每个模块的标题统一，可以将 .skin-box-tp和.skin-box-hd及.skin-box-bt的样式预定义在common.less中。假设在common.less中他们分别对应.mk-tp, .mk-hd, .mk-bt，那么，接下来用下面的代码定义模块的顶部、标题、尾部（如果想独特一点，那么就单独定义）

.tshop-pbsm-shop-item-recommend {
    .skin-box-tp {
        .mk-bt;
    }
    .skin-box-hd {
        .mk-hd;
    }
    .skin-box-bt {
        .mk-bt;
    }
}

 

接下来，我要定义该模块在不同布局中的样式。

前提分析：

1、在新旺铺中，CSS只允许定义在模块之内，没有公共CSS这么一说。也就是说我们写的CSS代码只能以.tshop-pbsm-shop-item-recommend开头。

2、定义在所有布局中宝贝推荐模块的公用样式，用如下的方法：

.tshop-pbsm-shop-item-recommend .skin-box-bd .item {
 //这里定义宝贝的公用样式
 //具体可以参考最后面附上的完整宝贝推荐模块的结构
}

3、定义不同布局中的特殊样式

新旺铺中宝贝推荐模块的布局拥有如下几种形式：

.item3line1：每行3个宝贝，可存在950/750布局中。

.item4line1：每行4个宝贝，可存在950/750布局中。

.item5line1：每行5个宝贝，可存在950/750布局中。

.item7line1：每行7个宝贝，只存在950布局中。

.item30line1：每行3个宝贝，只存在750布局中。

.item1line1：每行1个宝贝，只存在190布局中。

现在的问题是：

item3line1、item4line1、item5line1他们是适应在950/750之中的。但是在不同的布局中，每个宝贝占的宽度是不一样的。如何才能让定义的样式兼容750/950布局呢？方法是：在修改这些宝贝排列方式的时候，.item及其子元素不能指定宽度，否则可能产生不能兼容950/750的情况。

 

最后附上一个完整的宝贝推荐模块的CSS结构定义

.skin-box-bd {
    //行样式
    div.item3line1, div.item4line1 {
        dl.item {    //每行的最后一个为 dl.item.last
            //宝贝图片
            dt.photo {}
            
            //宝贝详情
            dd.detail {
                //宝贝属性
                div.attribute {
                    //宝贝原价
                    div.cprice-area {
                        span.c-price { //只影响价格的数字样式}
                    }
                    //宝贝销量
                    div.sale-area {
                        span.sale-num { //只影响销量数字 }
                    }
                }
                //宝贝名字
                a.item-name {}
            }
            
            //宝贝评论
            dd.rates {
                //评论数与更多评论
                div.title {
                    //评论数量展示
                    h4 {
                        span { //数量 }
                    }
                    //更多评论链接
                    a {}
                }
                
                //最新评论
                p.rate {}
            }
        }
    }
}

注意：当每行显示5、7个宝贝是，不显示销售笔数，不显示评论、不显示评论数。由于店铺没有设置打折，所以上面的代码中并没有提选出折扣价的部分。

总结：宝贝推荐模块是考验一个设计师写CSS能力的模块，在这里可能还存在更好的编写方式，待日后慢慢发现。