宝贝推荐模块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能力的模块,在这里可能还存在更好的编写方式,待日后慢慢发现。