Tag Cloud 样式的设计方案

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

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

Tag Cloud 样式的设计方案 – 示例

 
<style type='text/css'>
	/* display the individual items next to each other, not one-per-line */
	.tag-cloud li { display: inline; }
	/* hide the extra context from CSS-enabled browsers, but not screenreaders */
	.tag-cloud span { position: absolute; left: -999px; width: 990px; }
	/* size is purely presentational, based upon the class */
	.tag-cloud .not-popular { font-size: 1em; }
	.tag-cloud .not-very-popular { font-size: 1.3em; }
	.tag-cloud .somewhat-popular { font-size: 1.6em; }
	.tag-cloud .popular { font-size: 1.9em; }
	.tag-cloud .very-popular { font-size: 2.2em; }
	.tag-cloud .ultra-popular { font-size: 2.5em; }
</style>
 
<ol class='tag-cloud'>
    <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>
    <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>
    <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>
    <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>
 
    <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>
    <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>
    <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>
    <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>
 
    <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>
 
    <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>
    <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>
    <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>
 
    <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>
 
    <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>
    <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>
    <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>
 
    <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>
    <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>
 
    <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>
    <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>
 
</ol>

文章作者用 not-popularnot-very-popularsomewhat-popularpopularvery-popularultra-popular 来表示 Tag 的 1 – 6 个级别,用隐藏的 <span> 标签包含 Tag 的统计说明文字。

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>