品优购 推荐模块

设计

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

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

  <div class="w recom">
     <div class="recom_hd fl">
     </div>
     <div class="recom_bd fl">
     </div>
   </div>

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

recom_hd

    <div class="recom_hd fl">
       <img src="./images/clock.png" alt="">
       <h5>今日推荐</h5>
     </div>

.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

    <div class="recom_bd fl">
       <ul>
         <li><img src="./upload/pic.jpg" alt=""></li>
         <li><img src="./upload/pic.jpg" alt=""></li>
         <li><img src="./upload/pic.jpg" alt=""></li>
         <li><img src="./upload/pic.jpg" alt=""></li>
       </ul>
     </div>

.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;
}