php与css 标签云效果

2. function createTagCloud($tags)
3. {
4. //I pass through an array of tags
5. $i=0;
6. foreach($tags as $tag)
7. {
8. $id = $tag['id']; //the tag id, passed through
9. $name = $tag['tag']; //the tag name, also passed through in the array
11. //using the mysql count command to sum up the tutorials tagged with that id
12. $sql = "SELECT COUNT(*) AS totalnum FROM tutorials WHERE tags LIKE '%".$id."%' AND published = 1";
14. //create the resultset and return it
15. $res = mysql_query($sql);
16. $res = mysql_fetch_assoc($res);
18. //check there are results ;)
19. if($res)
20. {
21. //build an output array, with the tag-name and the number of results
22. $output[$i]['tag'] = $name;
23. $output[$i]['num'] = $res['totalnum'];
24. }
26. $i++;
27. }
29. /*this is just calling another function that does a similar SQL statement, but returns how many pieces of content I have*/
30. $total_tuts = $this->getNumberOfTutorials();
32. //ugh, XHTML in PHP? Slap my hands - this isn't best practice, but I was obviously feeling lazy
33. $html = '
    ';
    • //iterate through each item in the $output array (created above)
    • foreach($output as $tag)
    • {
    • //get the number-of-tag-occurances as a percentage of the overall number
    • $ratio = (100 / $total_tuts) * $tag['num'];
    • //round the number to the nearest 10
    • $ratio = round($ratio,-1);
    • /*append that classname onto the list-item, so if the result was 20%, it comes out as cloud-20*/
    • $html.= '
    • '.$tag['tag'].'
    ';
    • }
    • //close the UL
    • $html.= '
    ';
35. return $html;
36. }

复制代码

2，css代码部分 /*删除默认的列表样式，使之成为一个普通的清单列表*/

2. .home-item ul.tagcloud
3. {
4. list-style-type:none;
5. margin:0px;
6. padding:0px;
7. }
9. /*设置li的样式*/
10. .home-item ul.tagcloud li
11. {
12. display:inline !important;
13. margin-right:15px;
14. line-height:2em;
15. }
17. .home-item ul.tagcloud li a
18. {
19. display:inline;
20. }
22. /*标签云的效果*/
23. .home-item ul.tagcloud li.cloud-10 a
24. {
25. font-size:110%;
26. }
28. .home-item ul.tagcloud li.cloud-20 a
29. {
30. font-size:120%;
31. }
33. .home-item ul.tagcloud li.cloud-30 a
34. {
35. font-size:130%;
36. }
38. /*************************************
39. you get the idea, i'm skipping a few
40. *************************************/
42. .home-item ul.tagcloud li.cloud-90 a
43. {
44. font-size:190%;
45. }
47. .home-item ul.tagcloud li.cloud-100 a
48. {
49. font-size:200%;
50. }

复制代码