品优购 推荐模块

设计

这个部分分为左右两个模块，较为简单

今日推荐

• 左侧图片加文字，居中 - recom_hd
• 右侧用ul li加链接放图片 - recom_bd

.recom {
  margin-top: 12px;
  height: 163px;
}

recom_hd

    

       
       
今日推荐
     

.recom_hd {
  padding-top: 30px;
  height: 163px;
  text-align: center;
  width: 205px;
  background-color: #5C5251;
}
.recom_hd h5 {
  padding-top: 10px;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}

recom_bd

.recom_bd {
  background-color: #EBEBEB;
}
.recom_bd ul li {
  position: relative;
  float: left;
  padding: 10px 0;
}
.recom_bd ul li:nth-child(-n+3)::after {
  position: absolute;
  right: 0;
  top: 10px;
  content: '';
  width: 1px;
  height: 145px;
  background-color: #ddd;
}