本页二维码,扫一扫分享到朋友圈
朋友圈

用CSS制作标签云


阅读228 评论0 赞 43返回首页    go 编程与技术  go 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属性控制的,所以你刷新页面看到的效果跟这次一样。

 

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


  上一篇:go css实现文字层浮在图片之上示例代码
  下一篇:go css background属性详解


评论


用QQ登录管理/创建网站 用微博登录管理/创建网站   发布于:12-18