标签:
这就是我们要制作的标签云效果。
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
(完)
标签:
原文地址:http://www.cnblogs.com/zhangbao/p/5841915.html