效果展示
绘制大致容器
gird
简易布局,11个dd
元素模拟图片
<dl class="view">
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>
dl,
dd {
padding: 0;
margin: 0;
}
.view {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 300px;
}
.view dd {
height: 100px;
background: #ccc;
box-sizing: border-box;
border: 1px solid #fff;
}
counter
计算属性展示数量
使用::before伪元素覆盖住图片,将
counter计算的数量展示在
::before元素中
counter
.view {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 300px;
counter-reset: images;
}
.view dd {
height: 100px;
background: #ccc;
box-sizing: border-box;
border: 1px solid #fff;
counter-increment: images;
}
.view dd::before{
content: "+"counter(images);
display: inline-block;
width: 100%;
height: 100%;
line-height: 100px;
color: #fff;
font-size: 30px;
text-align: center;
}
counter
已经将全部dd
元素数量展示出来,可我们只需要超出第九个dd
元素的数量,这要怎么做呢?
其实很简单,使用:nth-child伪类选择第九个dd
元素后的兄弟元素
.view {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 300px;
counter-reset: images;
}
.view dd {
height: 100px;
background: #ccc;
box-sizing: border-box;
border: 1px solid #fff;
}
.view dd:nth-child(9)~dd {
counter-increment: images;
}
.view dd:nth-child(9) ~ dd::before{
content: "+"counter(images);
display: inline-block;
width: 100%;
height: 100%;
line-height: 100px;
color: #fff;
font-size: 30px;
text-align: center;
}
~ dd
表示后面所有的dd
元素
嘿嘿!只差将最后的元素移个位置了,可以使用定位
dl,
dd {
padding: 0;
margin: 0;
}
.view {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 300px;
counter-reset: images;
position: relative;
}
.view dd {
height: 100px;
background: #ccc;
box-sizing: border-box;
border: 1px solid #fff;
}
.view dd:nth-child(9)~dd {
width: 100px;
counter-increment: images;
position: absolute;
right: 0;
bottom: 0;
}
.view dd:nth-child(9)~dd::before {
content: "+"counter(images);
display: inline-block;
width: 100%;
height: 100%;
line-height: 100px;
color: #fff;
font-size: 30px;
text-align: center;
}
将超出第九个的所有元素定位至容器右下方
原生js实现点击展示
超出第九个的所有元素被定位在右下,利用js实现点击定位的元素则将元素去除定位属性
//去除定位
.view dd.no-befter {
position: static !important;
}
.view dd.no-befter::before {
display: none !important;
}
let dd = document.getElementsByTagName('dd'),
len = dd.length;
dd[len - 1].onclick = () => {
[].slice.call(dd).forEach(val => {
val.classList.add('no-befter');
})
}
counter另一种思维实现
counter
实现九宫格,上面是使用counter
默认从0
开始。现在重新设置counter
从-9
开始计算。
dl,
dd {
padding: 0;
margin: 0;
}
.view {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 300px;
counter-reset: images -9;
position: relative;
}
.view dd {
height: 100px;
background: #ccc;
box-sizing: border-box;
border: 1px solid #fff;
counter-increment: images;
}
.view dd::before {
content: counter(images);
display: inline-block;
width: 100%;
height: 100%;
line-height: 100px;
color: #fff;
font-size: 30px;
text-align: center;
}
同理,超出第九个元素才展示数量,然后定位
dl,
dd {
padding: 0;
margin: 0;
}
.view {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 300px;
counter-reset: images -9;
position: relative;
}
.view dd {
height: 100px;
background: #ccc;
box-sizing: border-box;
border: 1px solid #fff;
counter-increment: images;
}
.view dd:nth-child(9)~dd:before {
content: counter(images);
display: inline-block;
width: 100%;
height: 100%;
line-height: 100px;
color: #fff;
font-size: 30px;
text-align: center;
}
后面的代码就不展示了,基本上是一样的。
所有代码保存在 github需要的自取。
最后
CSS::marker让文字序号不再呆板,counter
配合::marker
可以做有趣列表展示。
公众号:隔壁姥爷,求个关注❤️?
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!