如何像京东一样打造个性化推荐页面 - 以小竖线设计为例的静态网站制作指南
最编程
2024-02-11 08:14:57
...
猜你喜欢模块制作
主要知识点:结构伪类选择器和伪元素选择器&常规页面布局
HTML结构
<!-- 猜你喜欢模块 -->
<div class="like">
<div class="hd">
<div class="left">猜你喜欢</div>
<div class="right">换一批 <img src="./images/换一批.png" alt=""></div>
</div>
<div class="bd">
<li>
<div class="img"><img src="./upload/书包.png" alt=""></div>
<div class="text">
<p>阳光美包新款单肩包女</p>
<p>包时尚子母包四件套女</p>
<i>¥116.00</i>
</div>
</li>
<li>
<div class="img"><img src="./upload/炒锅.png" alt=""></div>
<div class="text">
<p>爱仕达 30CM炒锅不粘</p>
<p>锅NWG8330E电磁炉炒</p>
<i>¥99.00</i>
</div>
</li>
<li>
<div class="img"><img src="./upload/捷波朗.png" alt=""></div>
<div class="text">
<p>捷波朗</p>
<p>(jabra)BOOSI劲步</p>
<i>¥245.00</i>
</div>
</li>
<li>
<div class="img"><img src="./upload/欧普.png" alt=""></div>
<div class="text">
<p>欧普</p>
<p>JYLZ08面板灯平板灯铝</p>
<i>¥238.00</i>
</div>
</li>
<li>
<div class="img"><img src="./upload/三星.png" alt=""></div>
<div class="text">
<p>三星</p>
<p>(G5500)移动联</p>
<i>¥649.00</i>
</div>
</li>
<li>
<div class="img"><img src="./upload/精华露.png" alt=""></div>
<div class="text">
<p>韩国所望</p>
<p>紧致湿润精华露400ml</p>
<i>¥1169.00</i>
</div>
</li>
</div>
</div>
ps:主要结构就是.like大盒子里装有.hd和.bd上下两个大盒子。
.hd盒子里又有两个小盒子。.bd盒子里有6个li,每个li里包含一个图片盒子和一个文字盒子
CSS代码
/* 猜你喜欢模块 */
.like {
width: 1200px;
height: 280px;
margin: 10px auto;
}
.like .hd {
height: 40px;
}
.like .hd .left {
float: left;
font-size: 18px;
line-height: 40px;
}
.like .hd .right {
float: right;
line-height: 40px;
margin-right: 20px;
}
.like .hd .right img {
widows: 12px;
height: 12px;
}
.like .bd {
height: 240px;
border: 1px solid #ededed;
}
.like .bd li {
height: 240px;
width: 199px;
float: left;
}
.like .bd li .img {
width: 170px;
height: 140px;
text-align: center;
line-height: 140px;
margin-bottom: 5px;
}
.like .bd li .text {
position: relative;
width: 170px;
margin-left: 30px;
}
.like .bd li i {
color: #df3033;
font-size: 18px;
}
.like .text:nth-child(-n+5)::after {
content: '';
position: absolute;
bottom: 10px;
right: 5px;
width: 1px;
height: 45px;
background-color: #ddd;
}
在这里将结构伪类选择器和伪元素选择器结合使用,再加上定位就可以实现小竖线效果
效果展示
到这里猜你喜欢模块就算做完了,但其实还有一个小细节,那就是最后一个.text盒子后面其实不应该有小竖线的
.like .text:nth-child(-n+5)::after {
content: '';
position: absolute;
bottom: 10px;
right: 5px;
width: 1px;
height: 45px;
background-color: #ddd;
这段代码我想实现的功能是给.like盒子底下的前五个.text盒子后面加上小竖线,但是理想很丰满,现实很骨感
这里也是一个使用结构伪类选择器需要注意的地方,敲重点敲重点
结构伪类选择器的作用是选择某个父元素里一个或几个指定的元素
使用结构伪类选择器时如E:nth-child(n),E必须为亲兄弟,什么意思嘞,看代码
<body>
<div class="like">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
这里是一个.like大盒子里包含了六个div盒子
.like div {
margin: 20px auto;
width: 500px;
height: 50px;
border: 1px solid red;
list-style: none;
}
.like div:nth-child(-n+3) {
background-color: skyblue;
}
现在我将前三个div盒子选出来填充天蓝色的背景色
效果
是没有问题的,但是现在我给每一个div盒子套一个li
<body>
<div class="like">
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
</div>
</body>
再看效果
这个时候六个div盒子都上色了,因为这个时候这六个div之间有li隔着不再是亲兄弟了
原文地址:https://www.cnblogs.com/ben-studying/p/14705949.html
上一篇: 领域驱动设计