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

用背景图实现的 tab 标签页导航菜单效果

本文介绍的是一个非常不错的CSS tab 标签页导航菜单效果,代码简洁,兼容各种浏览器,最关键的是:通过学习实例里面的思路,我们很容易做出各种漂亮的 tab 效果,希望对初学者有帮助!

先看看抓图:

用背景图实现的 tab 标签页导航菜单效果 – 示例

 
<style type="text/css">
<!--
body {
	margin:0;
	padding:0;
	font: bold 11px/1.5em Verdana;
}
img {
	border: none;
}
 
/*- Menu Tabs 1--------------------------- */
#tabs1 {
	float:left;
	width:100%;
	background:#F4F7FB;
	font-size:93%;
	line-height:normal;
	border-bottom:1px solid #BCD2E6;
}
#tabs1 ul {
	margin:0;
	padding:10px 10px 0 50px;
	list-style:none;
}
#tabs1 li {
	display:inline;
	margin:0;
	padding:0;
}
#tabs1 a {
	float:left;
	background:url("tableft1.gif") no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
}
#tabs1 a span {
	float:left;
	display:block;
	background:url("tabright1.gif") no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#627EB7;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabs1 a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
	color:#627EB7;
}
#tabs1 a:hover {
	background-position:0% -42px;
}
#tabs1 a:hover span {
	background-position:100% -42px;
}
#tabs1 #current a {
	background-position:0% -42px;
}
#tabs1 #current a span {
	background-position:100% -42px;
}
-->
</style>
 
<div id="tabs1">
	<ul>
		<li id="current"><a href="Home.html"><span>Home</span></a></li>
		<li><a href="Products.html"><span>Products</span></a></li>
		<li><a href="Services.html"><span>Services</span></a></li>
		<li><a href="Support.html"><span>Support</span></a></li>
		<li><a href="Order.html"><span>Order</span></a></li>
		<li><a href="News.html"><span>News</span></a></li>
		<li><a href="About.html"><span>About</span></a></li>
	</ul>
</div>

背景图片:

代码简洁,又兼容各种浏览器,仔细读读代码,相信会有很大收获!如果您原创或者收集到更漂亮的效果,记得共享哟!