設(shè)計(jì)
這個(gè)部分分為左右兩個(gè)模塊，較為簡(jiǎn)單
今日推薦
- 左側(cè)圖片加文字伐庭，居中 - recom_hd
- 右側(cè)用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;
}
