效果图
CSS代码
body{ font-family:"微软雅黑", Arial, sans-serif;} #main{border:none; background:none;}
body,ul,li,h1,h2,h3,p,form{margin:0;padding:0;}body{background:#fbfbfb;color:#444;font-size:14px;}
a{color:#444;text-decoration:none;}a:hover{color:red;}
/* tagscloud */
#tagscloud{width:250px;height:260px;position:relative;font-size:12px;color:#333;margin:20px auto 0;text-align:center;}
#tagscloud a{position:absolute;top:0px;left:0px;color:#333;font-family:Arial;text-decoration:none;margin:0 10px 15px 0;line-height:18px;text-align:center;font-size:12px;padding:1px 5px;display:inline-block;border-radius:3px;}
#tagscloud a.tagc1{background:#666;color:#fff;}
#tagscloud a.tagc2{background:#F16E50;color:#fff;}
#tagscloud a.tagc5{background:#006633;color:#fff;}
#tagscloud a:hover{color:#fff;background:#0099ff;}
html代码
<div id="tagscloud">
<a href="https://www.tpframe.com/" class="tagc1">JAVA</a>
<a href="https://www.tpframe.com/" class="tagc2">C/C++</a>
<a href="https://www.tpframe.com/" class="tagc5">PHP</a>
<a href="https://www.tpframe.com/" class="tagc2">JAVA<a>
<a href="https://www.tpframe.com/" class="tagc2">C/C++</a>
<a href="https://www.tpframe.com/" class="tagc1">JAVASCRIPT</a>
<a href="https://www.tpframe.com/" class="tagc2">JAVA</a>
<a href="https://www.tpframe.com/" class="tagc5">PHP</a>
<a href="https://www.tpframe.com/" class="tagc2">C/C++</a>
<a href="https://www.tpframe.com/" class="tagc2">python</a>
<a href="https://www.tpframe.com/" class="tagc5">JAVA</a>
<a href="https://www.tpframe.com/" class="tagc2">PHP</a>
<a href="https://www.tpframe.com/" class="tagc1">JAVA</a>
<a href="https://www.tpframe.com/" class="tagc2">C/C++</a>
<a href="https://www.tpframe.com/" class="tagc5">PHP</a>
<a href="https://www.tpframe.com/" class="tagc2">JAVA<a>
<a href="https://www.tpframe.com/" class="tagc2">C/C++</a>
<a href="https://www.tpframe.com/" class="tagc1">JAVASCRIPT</a>
<a href="https://www.tpframe.com/" class="tagc2">JAVA</a>
<a href="https://www.tpframe.com/" class="tagc5">PHP</a>
<a href="https://www.tpframe.com/" class="tagc2">C/C++</a>
<a href="https://www.tpframe.com/" class="tagc2">python</a>
<a href="https://www.tpframe.com/" class="tagc5">JAVA</a>
<a href="https://www.tpframe.com/" class="tagc2">PHP</a>
</div>
<script src='js/tagscloud.js' type="text/javascript"></script>
点击下载完整代码