本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-08-01网站人数计数器代码-verilog计数器代码大全

我经常在一些运用中见到这一九宫格设计方案。缩列图低于9个时，一切正常排序。当缩列图超出9个时，系统软件会提醒您还剩多少个，如下所示所显示:

怎样用纯CSS做到这个实际效果？使我们一起来看看。

一，九宫格的合理布局。

合理布局比较简单，一个十分普遍的九正方形网格图合理布局，在这儿应用网格图。

...

这儿格子能够简易的用宽高比[1]来完成，相匹配的CSS如下所示。

.list{ position: relative; display: grid; width: 300px; margin: auto; grid-template-columns: repeat(3,1fr); list-style: none; padding: 0; gap: 2px;}.item{ aspect-ratio: 1;/*高宽比1:1*/}

实际效果如下所示。

那麼，当剩下打印纸张超出9张时，怎样全自动提醒？再次往下看。

第二，CSS电子计数器。

说到编码序列，当然会想起CSS电子计数器[2]。如今大家加上电子计数器。

.list{ /*...*/ counter-reset: count; /*复位*/}

随后在每一个中表明一个数据。项，而且还可以应用伪元素::after。

.item{ counter-increment: count;}.item::after{ content: counter(count); /*别的款式*/ display: grid; height: 100%; place-content: center; font-size: 30px; color: #fff;}

那样，能够得到下列实际效果。

图已表明，但仍有两个难题:

1.当总数达到9时，超过的照片没有被掩藏。2.这一数据不超过照片的总数，反而是数量。

第三，藏在界面以外。

实际上这非常容易，由于量是确定的，只有用含有~)的选择符n-child来完成。

.item:nth-child(9)~.item{ /*挑选第9个之后的原素*/ visibility: hidden;}在这个地方，超过的照片根据由此可见性掩藏:掩藏，由于一个特性不容易危害电子计数器测算，假如应用表明:无，记数将被绕过。

四是统计分析总数超标准。

现阶段，全部目录的总数还是在结尾记数的，因为它是以第一个刚开始的，可是我们可以特定从第十个逐渐记数。大家会获得哪些实际效果？为了更好地便捷演试，临时开启掩藏。

.item{ /*counter-increment: count;*/}.item:nth-child(9)~.item{ /*从第10个逐渐记数*/ counter-increment: count;}.item:nth-child(9)~.item::after{ content: counter(count);} 能够见到，从第10张逐渐记数后，最后一个数字表示还剩是多少张。

如今只需把最终一张图片放到右下方(绝对定位)。最终一张图片能够根据。新项目:第n身高新项目(9) ~。item: last-child，意味着第9张图片后边的最终一张图片，完成如下所示。

.item:nth-child(9)~.item{ position: absolute; width: calc(100% / 3 - 1px); counter-increment: count; visibility: hidden; right: 0; bottom: 0;}.item:nth-child(9)~.item:last-child::after{ visibility: visible; background-color: rgba(0,0,0,.2);}

那样就保持了纯CSS全自动提醒剩下照片的实际效果，演试如下所示。

这儿的加上和删掉演试了连接点数的动态性改动，这与互动逻辑性不相干。

详细的编码能够浏览list-counter (codepen.io)[3]。

形容词 （verb的简称）别的复位方式

在前面的完成中，大家手动式特定从第10个原素逐渐记数。

.item:nth-child(9)~.item{ /*从第10个逐渐记数*/ counter-increment: count;}

实际上也有一种方式非常值得一试，便是立即特定电子计数器的初值，默认设置为0，现在可以改为-9，完成如下所示。

.list{ /*...*/ counter-reset: count -9; /*复位为-9*/}拥有不一样的复位构思，剩余的便是和以前一样的逻辑性，详细的编码能够浏览list-counter-reset(code pen . io)[4]。

连系动词汇总和表述。

这一案件到这里。一个成本低的CSS方法，尽管非常少，可是十分好用，尤其是选择符的应用，未来很有可能会使用。CSS电子计数器能够说成更加灵活强劲，根据用心发掘能够做到更适用的实际效果。总得来说:

九宫格合理布局如果不考虑到兼容模式优先选择应用 grid 合理布局响应式方形能够应用 aspect-ratio 完成碰到和编码序列相关的合理布局，优先选择考虑到 CSS 电子计数器熟练掌握 CSS 选择符，nth-child(n)和 ~ 能够组成挑选第 n 个之后的原素能够特定从第 n 个原素逐渐记数能够特定电子计数器的初值CSS 电子计数器沒有兼容问题，能够安心使用