【电商14】recom

• li:nth-child(-n+3)选取前三个

• 控制图片大小，防止更改图片破坏布局！！

• 伪元素要带着content

• 子绝父相，伪元素的父元素是它前面的那个元素li

• 直接用的img的

head是左边那个时钟，body是右边那部分

html

   <!-- 推荐模块recom开始 -->
    <div class="w recom">
        <div class="recom-hd"><img src="images/recom.png" alt=""></div>
        <div class="recom-bd">
            <ul>
                <li><img src="upload/recom_03.jpg" alt=""></li>
                <li><img src="upload/recom_03.jpg" alt=""></li>
                <li><img src="upload/recom_03.jpg" alt=""></li>
                <li><img src="upload/recom_03.jpg" alt=""></li>
            </ul>
        </div>
    </div>

index.css

.recom {
    margin-top: 12px;
    height: 163px;
    background-color: #ebebeb;     /* 妙 */
}

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

.recom-bd {
    float: left;
}

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

.recom-bd ul li img {   /* 控制图片大小，防止更改图片破坏布局 */
     248px;
    height: 163px;
}

.recom-bd ul li:nth-child(-n+3)::after {
    content: '';          /*伪元素要带着content */
    position: absolute;      /* 子绝父相，伪元素的父元素是它前面的那个元素li*/
    right: 0;
    top: 10px;
    
     1px;
    height: 145px;       /* 固定定位，不可能margin-top？？？after伪元素还有讲究？？ */
    background-color: #ddd;
}