6.今日推荐模块 recom

• 大盒子 recom 推荐模块 recommend
• 里面两个盒子，浮动
• 1 号盒子 recom-hd
• 2 号盒子 recom-bd

1 号盒子

index.html

  <!-- recom 今日推荐模块 start  -->
  <div class="recom w">
    <div class="recom-hd">
      <img src="images/recom.png" alt="">
    </div>
    <div class="recom-bd"></div>
  </div>
  <!-- recom 今日推荐模块 end  -->

index.css

/* recom 今日推荐模块 start */
.recom {
  height: 162px;
  margin-top: 10px;
  background-color: blue;
}

.recom .recom-hd {
  height: 162px;
  width: 205px;
  padding-top: 30px;
  text-align: center;
  background-color: #5c5251;
}

/* recom 今日推荐模块 end */

2 号盒子

图片

recom_01.pngrecom_02.pngrecom_03.pngrecom_04.png

index.html

 <!-- recom 今日推荐模块 start  -->
  <div class="recom w">
    <div class="recom_hd">
      <img src="images/recom.png" alt="">
    </div>
    <div class="recom_bd">
      <ul>
        <li><a href="#"><img src="upload/recom_01.png" alt=""></a></li>
        <li><a href="#"><img src="upload/recom_02.png" alt=""></a></li>
        <li><a href="#"><img src="upload/recom_03.png" alt=""></a></li>
        <li><a href="#"><img src="upload/recom_04.png" alt=""></a></li>
      </ul>
    </div>
  </div>
  <!-- recom 今日推荐模块 end  -->

index.css

/* recom 今日推荐模块 start */

.recom {
  height: 162px;
  margin-top: 10px;
  /* background-color: #ebebeb; */
  background-color: #ebebeb;
}

.recom .recom_hd {
  float: left;
  height: 162px;
  width: 205px;
  padding-top: 30px;
  text-align: center;
  background-color: #5c5251;
}

.recom .recom_bd {
  float: left;
}

.recom .recom_bd ul li {
  float: left;
  position: relative;
}

.recom .recom_bd ul li img {
  width: 248px;
  height: 163px;
}

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

/* recom 今日推荐模块 end */