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

    (完)

  • 相关阅读:
    表单元素input与文字对齐
    css hack较全
    闭合浮动
    字体
    css中z-index属性(包含各浏览器对此兼容问题)
    ie中使用滤镜实现css3的效果
    css实现提示框
    css3实现渐变效果
    css伪类
    .net core运用application/x-www-form-urlencoded发起post请求
  • 原文地址:https://www.cnblogs.com/zhangbao/p/5841915.html
Copyright © 2011-2022 走看看