用CSS制作伪标签云

Posted 2020-08-06 张宝的博客

• performance testing
• stress testing
• conformance testing
• acceptane testing
• smoke testing
• regression testing
• white box testing
• system testing
• black box testing
• load testing
• compatibility testing
• unit testing

 

这就是我们要制作的标签云效果。

 

html代码

<ul class="cloud">
    <li>performance testing</li>
    <li>stress testing</li>
    <li>conformance testing</li>
    <li>acceptane testing</li>
    <li>smoke testing</li>
    ...
</ul>

 

CSS代码

/* 清除ul默认样式 */

.cloud {
    display: inline;
    list-style-type: none;
    width: 400px;
}
.cloud li {
    list-style: none;
    display: inline;
}

/* 清除ul默认样式 */

.cloud li:nth-of-type(3n + 1) {
    font-size: 1.25em;
}
.cloud li:nth-of-type(4n+3) {
    font-size: 1.5em;
}
.cloud li:nth-of-type(5n - 3) {
    font-size: 1em;
}

 

这个标签云效果并不是随机的，是用:nth-of-type这个CSS属性控制的，所以你刷新页面看到的效果跟这次一样。

 

不过有什么关系呢，有标签云效果。你可以根据自己的需要对代码更改。

 

参考链接：Tag cloud of random sizes in pure CSS

 

（完）