如何样式标签云

使用CSS来设置标签云的样式

标签云是一个项目列表的视觉描述。 您经常会在博客上看到标签云。 它被Flickr等网站广泛使用。

标签云是一些链接列表,其大小和重量(有时也是颜色)会根据某些可衡量的属性而发生变化。 大多数标签云都是基于流行度或使用特定标签标记的页面数量而构建的。 但是,您可以在网站上的任何项目列表中创建一个标签云,这些项目至少有两种显示方式。 例如:

你需要建立一个标签云?

构建标签云很容易,您只需要两件事:

大多数标签云都是链接列表,所以如果每个项目都有与之关联的网址,它会有所帮助。 但这不是创建视觉层次结构所必需的。

构建热门链接标签云的步骤

我的网站每天都有获得页面浏览量的文章,这是我用来创建标签云的一个简单指标。 因此,对于这个示例,我们将从2007年1月1日这一周的文章列表中创建一个标签云,这是我网站上前25篇文章。

  1. 确定您的层次结构中需要多少级别。
    1. 虽然您的云中可能具有尽可能多的级别,但您的列表中有这些项目,但代码繁琐,而且差异可能非常小。 我建议您的层次结构中不要超过10个级别。
  2. 确定每个级别的分界点。
    1. 这可能就像每天将页面视图切割成1/10切片一样简单 - 即。 如果您网站上的最大页面每天获得100次页面浏览量,则可以将其分为100+,90-100,80-90,70-80等。我以这种方式切断了我的页面浏览量。
  3. 以页面浏览顺序列出您的项目,并根据第2步给予他们排名
    1. 如果您在某些插槽中没有任何项目,请不要担心,这只会让云更有趣。
  4. 按字母顺序排列你的列表(或者你想使用的任何第二类排序)。
    1. 这使云有趣。 如果您将它按等级排序,那么它将只是一个列表,其中最大的项目在顶部到底部最小。
  5. 编写您的HTML,以便排名是一个班级编号。 class =“tag4”>添加流式音频文件

一旦你有每个单独的列表项的HTML,以及你想要显示它们的顺序,那么你需要做出决定。 你可以把链接放在一个段落中,你就完成了。 但是这不会被语义标记,任何没有CSS的人都会看到一段很大的链接。 这种类型的列表的HTML将如下所示:

添加流式音频文件 网站的基本标签 最佳网页设计软件 为完全丢失建立网页 色彩象征 a>

相反,我建议您使用无序列表创建标签云。 这是几行HTML和CSS代码,但它确保无论谁来查看它,内容都是可读的。 HTML看起来像这样: