zoukankan      html  css  js  c++  java
  • 用CSS制作伪标签云

    • 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

    (完)

  • 相关阅读:
    web.config中httpRedirect
    时间复杂度O(n)与空间复杂度O(1)
    NserviceBus过期处理
    struts的生命周期
    myeclipse 更改字体
    研磨struts2地址
    jQuery 实现公告无缝滚动
    统计网站访问图形数据链接
    工作经常使用的SQL整理
    使IE6下PNG背景透明的七种方法
  • 原文地址:https://www.cnblogs.com/zhangbao/p/5841915.html
Copyright © 2011-2022 走看看