样式:
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif ,"宋体";}
.demo{background:#FFF8DE;border:solid 1px #ff6600;width:380px;margin:20px auto;}
.demo h2{font-size:18px;height:32px;padding:10px 0 0 20px;font-family:"微软雅黑","宋体";border-bottom:solid 1px #ff6600;}
.taglist{padding:20px 20px 30px 20px;}
.taglist a{padding:3px;display:inline-block;white-space:nowrap;}
a.size1{font-size:16px;padding:10px;}
a.size2{padding:7px;font-size:18px;}
a.size3{padding:5px;font-size:20px;}
a.size4{padding:5px;font-size:20px;}
a.size5{padding:5px;font-size:24px;}
a.size6{padding:0px;font-size:18px;}
a.size7{padding:5px;font-size:20px;}
a.size8{padding:5px;font-size:24px;}
a.size9{padding:0px;font-size:18px;}
</style>
JQ:
<script type="text/javascript"> $(document).ready(function(){ var tags_a = $("#tags").find("a"); tags_a.each(function(){ var x = 9; var y = 0; var rand = parseInt(Math.random() * (x - y + 1) + y); $(this).addClass("size"+rand); }); }); </script>
Html:<div class="demo"> <div class="taglist" id="tags"> <a class="tag">小麦种植</a> <a class="tag">豆类种植</a> <a class="tag">麻类种植</a> <a class="tag">其他水果种植</a> <a class="tag">坚果种植</a> <a class="tag">糖料种植</a> <a class="tag">其他批发业</a> <a class="tag">水产养殖</a> <a class="tag">葡萄种植</a> <a class="tag">综合零售</a> <a class="tag">油料种植</a> <a class="tag">林木育种</a> <a class="tag">蔬菜种植</a> <a class="tag">竹材采运</a> <a class="tag">烟草种植</a> <a class="tag">内陆养殖</a> <a class="tag">仓储业</a> <a class="tag">住宿业</a> <a class="tag">棉花种植</a> <a class="tag">其他水果种植</a> <a class="tag">玉米种植</a> </div> </div>