欢迎光临
我们一直在努力

产品列表边框,不同分辨率下边框设置,响应式设计

@media (min-width:1200px){
.goodslist{border-top: 1px solid #dddddd; border-right: 1px solid #dddddd;}
.goodslist:nth-child(4n+1){ border-left:1px solid #dddddd;}
.goodslist:nth-child(5){ border-bottom: 1px solid #dddddd;}
.goodslist:nth-child(6){ border-bottom: 1px solid #dddddd;}
.goodslist:nth-child(7){ border-bottom: 1px solid #dddddd;}
.goodslist:nth-child(8){ border-bottom: 1px solid #dddddd;}
.goodslist p{ font-size: 12px;}
}
@media (max-width:992px) and (min-width:768px){
.goodslist{border-top: 1px solid #dddddd; border-right: 1px solid #dddddd;}
.goodslist:nth-child(2n+1){ border-left:1px solid #dddddd;border-bottom: 1px solid #dddddd;}
.goodslist:nth-child(7){ border-bottom: 1px solid #dddddd;}
.goodslist:nth-child(8){ border-bottom: 1px solid #dddddd;}
.goodslist p{ font-size: 12px;}
}
@media (max-width:768px) {
.goodslist{border: 1px solid #dddddd; border-bottom:none;}
.goodslist:last-of-type{ border-bottom:1px solid #dddddd;}
.goodslist p{ font-size: 12px;}
}

 

未经允许不得转载:第五博客 » 产品列表边框,不同分辨率下边框设置,响应式设计
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

更专业 更方便

联系我们