前端练习项目——品优购 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="data: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，测量出高度，给出背景颜色即可。