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

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