首页 - 文章 - (X)HTML/CSS - (X)HTML/CSS小技巧

Tag Cloud 样式的设计方案

作者: Mark Norman Francis     来源: 24ways.org     时间: 2007-01-03 14:35:35
摘要: Tag 和 Tag Cloud 对于熟悉 WEB 2.0 的朋友肯定不会陌生，而 Tag Cloud 的样式设计也有多种方案，Mark Norman Francis 发布在 24Ways 的文章分别讨论了几种流行的 Tag Cloud 设计的优缺点，并在最后给出了作者认为最合适的方案。

本文并没有将原文翻译过来，只是摘录了作者最后提出的 Tag Cloud 设计方案，文章中给出了原文地址，有兴趣的朋友可以直接浏览原文。
归类: (X)HTML/CSS,

关键词: WEB2.0, 标签, Cloud, Tag,


Tag 和 Tag Cloud 对于熟悉 WEB 2.0 的朋友肯定不会陌生，而 Tag Cloud 的样式设计也有多种方案， Mark Norman Francis 发布在 24Ways 的文章分别讨论了几种流行的 Tag Cloud 设计的优缺点，并在最后给出了作者认为最合适的方案。

本文并没有将原文翻译过来，只是摘录了作者最后提出的 Tag Cloud 设计方案，文章中给出了原文地址，有兴趣的朋友可以直接浏览原文。


--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------



CSS:
  1.  
  2. <style type='text/css'> 
  3.     /* display the individual items next to each other, not one-per-line */ 
  4.     .tag-cloud li { display: inline; } 
  5.     /* hide the extra context from CSS-enabled browsers, but not screenreaders */ 
  6.     .tag-cloud span { position: absolute; left: -999px; width: 990px; } 
  7.     /* size is purely presentational, based upon the class */ 
  8.     .tag-cloud .not-popular { font-size: 1em; } 
  9.     .tag-cloud .not-very-popular { font-size: 1.3em; } 
  10.     .tag-cloud .somewhat-popular { font-size: 1.6em; } 
  11.     .tag-cloud .popular { font-size: 1.9em; } 
  12.     .tag-cloud .very-popular { font-size: 2.2em; } 
  13.     .tag-cloud .ultra-popular { font-size: 2.5em; } 
  14. </style> 
  15.  



HTML:
  1.  
  2. <ol class='tag-cloud'> 
  3.     <li class="somewhat-popular"><span>44 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/125shaftesburyavenue/' class='tag'>125 Shaftesbury Avenue</a></li> 
  4.     <li class="not-popular"><span>2 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/airlinefood/' class='tag'>airline food</a></li> 
  5.     <li class="ultra-popular"><span>344 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/austin/' class='tag'>austin</a></li> 
  6.     <li class="not-very-popular"><span>12 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/badjoke/' class='tag'>bad joke</a></li> 
  7.  
  8.     <li class="somewhat-popular"><span>52 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/brighton/' class='tag'>brighton</a></li> 
  9.     <li class="not-very-popular"><span>12 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/cowboyhat/' class='tag'>cowboy hat</a></li> 
  10.     <li class="somewhat-popular"><span>67 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/fireworks/' class='tag'>fireworks</a></li> 
  11.     <li class="not-popular"><span>2 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/fozziebear/' class='tag'>fozziebear</a></li> 
  12.  
  13.     <li class="somewhat-popular"><span>85 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/ironbridge/' class='tag'>ironbridge</a></li> 
  14.  
  15.     <li class="not-very-popular"><span>12 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/jukebox/' class='tag'>jukebox</a></li> 
  16.     <li class="somewhat-popular"><span>72 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/leaveamessage/' class='tag'>leave a message</a></li> 
  17.     <li class="not-very-popular"><span>26 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/lego/' class='tag'>lego</a></li> 
  18.  
  19.     <li class="very-popular"><span>151 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/london/' class='tag'>London</a></li> 
  20.  
  21.     <li class="not-very-popular"><span>25 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/microformats/' class='tag'>microformats</a></li> 
  22.     <li class="popular"><span>107 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/pubstandards/' class='tag'>Pub Standards</a></li> 
  23.     <li class="ultra-popular"><span>355 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/sanfrancisco/' class='tag'>San Francisco</a></li> 
  24.  
  25.     <li class="very-popular"><span>194 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/sxsw/' class='tag'>sxsw</a></li> 
  26.     <li class="not-very-popular"><span>13 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/thehairofchristianheilmann/' class='tag'>The hair of Christian Heilmann</a></li> 
  27.  
  28.     <li class="not-popular"><span>1 photo is tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/thereflectionofthehairofchristianheilmann/' class='tag'>The reflection of the hair of Christian Heilmann</a></li> 
  29.     <li class="not-popular"><span>2 photos are tagged with </span><a href='http://flickr.com/photos/mn_francis/tags/yaarrrrrrrrrrrrrrrrr/' class='tag'>yaarrrrrrrrrrrrrrrrr</a></li> 
  30.  
  31. </ol> 
  32.  



文章作者用 not-popular 、not-very-popular 、somewhat-popular 、popular 、very-popular 、ultra-popular 来表示 Tag 的 1 - 6 个级别，用隐藏的 <span> 标签包含 Tag 的统计说明文字。


原文网址：
http://24ways.org/2006/marking-up-a-tag-cloud


相关文章
发表评论 有想法？点此发表评论？
推荐链接：(联系 QQ ：326801485)