27.品优购列表页

目录

1 头部与尾部

2  导航部分

3  内容部分

---

1 头部与尾部

这两个地方是一样的

我们直接复制html并复用相关的css

有的版本logo的右侧还有一个 秒杀 的图像，那个如果要做的话直接插入图像然后进行定位就行，在我的代码中没有做

这个图像我html我不建议写到头部中，而是在和header平级的地方放一张图像，然后相对定位即可

原因是你不能把 秒杀 这张图像放在 头部的css中，那么你后期维护的话是不能再次进行复用的，与其不能方便复用还不如让页面效果与html和css对应起来

列表页也可以做seo优化，我在这里没做

2  导航部分

我的代码中导航是这一部分

html

css

3  内容部分

html

css

这里注意，如果不一开始给盒子一个边框，那么我们把鼠标放上去的时候会抖动一下，如果我们想消除这个效果，那么我们需要一开始就给一个透明色相同大小的边框

这样他就不会抖动(错位)了

最后加入favicon与title，标志我们的网页制作完成