设计
这个部分分为左右两个模块，较为简单
今日推荐
- 左侧图片加文字，居中 - 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;
}
