前端练习项目——品优购 Day7 推荐recom模块制作

 1.结构分析

整体是一个大盒子，有两个类名：版心w和推荐recom。左边是recom_hd，右边是recom_hb。

2.大盒子制作

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

给出高度和上间距。

3.左侧recom_hd盒子制作

       整体是一个盒子，盒子里面加入一张图片，再加上一个段落（否则文字会在图片旁边）写下文字即可。

<div class="recom_hd">
     <img src="images/shizhong.png">
     <p>今日推荐</p>
</div>

盒子的CSS代码：

.recom_hd {
    box-sizing: border-box;
    float: left;
    height: 163px;
    width: 205px;
    background-color: #5c5251;
    color: #e4e4e4;
    text-align: center;
    font-size: 18px;
    padding-top: 30px;
}

       这里需要介绍一个问题——因为要调整图片的位置，因此用到了padding-top，这时盒子会超出边界。解决方法一共三种：1.调整height，使height+padding-top=真正的高度      2.使用CSS3盒子，也就是box-sizing:border-box;      3.给父盒子加上overflow:hidden;

      float使盒子排在一行，text-align让图片和文字都居中（p继承的宽度与父盒子相同）

4.右侧recom_bd盒子制作

结构分析：依旧是ul li a模式，在a里面放图片即可。值得注意的是li与li之间竖线的做法。

盒子的CSS代码：

.recom_bd {
    float: left;
}

 加上浮动即可。

li的CSS代码：

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

由于li有多个，所以要加上浮动，而相对定位则是使用到了“子绝父相”。

img的CSS代码：

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

给出图片的宽和高即可。

重点：大竖线的制作

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

（1）伪类选择器的使用：

nth-child(n+3)：选择从第三个开始（包括第三个）到最后。

nth-child(-n+3): 选择从第三个开始（包括第三个）到第一个（反向）。

这里选中前三个，最后一个不需要。

由于是在li后面添加，因此使用::after，没有内容，则content:''; 即content置空（也相当于加了一个子盒子）。

（2）定位的使用：

       使用“子绝父相”的定位方法，给竖线加上绝对定位，然后right:0——竖线在最右侧，top:10px——竖线离盒子顶部为10px。宽度给1px，测量出高度，给出背景颜色即可。