使用CSS来设置标签云的样式
标签云是一个项目列表的视觉描述。 您经常会在博客上看到标签云。 它被Flickr等网站广泛使用。
标签云是一些链接列表,其大小和重量(有时也是颜色)会根据某些可衡量的属性而发生变化。 大多数标签云都是基于流行度或使用特定标签标记的页面数量而构建的。 但是,您可以在网站上的任何项目列表中创建一个标签云,这些项目至少有两种显示方式。 例如:
- 按照字母顺序排列的文章列表,其中包含指示文章受欢迎程度的样式。
- 按照字母顺序排列的网站列表,指明您最喜欢哪一个的样式。
- 以价格顺序列出的Web编辑列表,其中的样式表明每种方式与预定义的标准集有多接近。
- 一系列表示朋友的风格,表示你的房子到他们的距离。
你需要建立一个标签云?
构建标签云很容易,您只需要两件事:
- 项目列表(如Web文章,网站或您的朋友)
- 每个项目的测量值(例如每天的页面浏览量,您的排名1-10,或到您家的距离)。
大多数标签云都是链接列表,所以如果每个项目都有与之关联的网址,它会有所帮助。 但这不是创建视觉层次结构所必需的。
构建热门链接标签云的步骤
我的网站每天都有获得页面浏览量的文章,这是我用来创建标签云的一个简单指标。 因此,对于这个示例,我们将从2007年1月1日这一周的文章列表中创建一个标签云,这是我网站上前25篇文章。
- 确定您的层次结构中需要多少级别。
- 虽然您的云中可能具有尽可能多的级别,但您的列表中有这些项目,但代码繁琐,而且差异可能非常小。 我建议您的层次结构中不要超过10个级别。
- 确定每个级别的分界点。
- 这可能就像每天将页面视图切割成1/10切片一样简单 - 即。 如果您网站上的最大页面每天获得100次页面浏览量,则可以将其分为100+,90-100,80-90,70-80等。我以这种方式切断了我的页面浏览量。
- 以页面浏览顺序列出您的项目,并根据第2步给予他们排名
- 如果您在某些插槽中没有任何项目,请不要担心,这只会让云更有趣。
- 按字母顺序排列你的列表(或者你想使用的任何第二类排序)。
- 这使云有趣。 如果您将它按等级排序,那么它将只是一个列表,其中最大的项目在顶部到底部最小。
- 编写您的HTML,以便排名是一个班级编号。 class =“tag4”>添加流式音频文件
一旦你有每个单独的列表项的HTML,以及你想要显示它们的顺序,那么你需要做出决定。 你可以把链接放在一个段落中,你就完成了。 但是这不会被语义标记,任何没有CSS的人都会看到一段很大的链接。 这种类型的列表的HTML将如下所示:
添加流式音频文件 网站的基本标签 最佳网页设计软件 为完全丢失建立网页 色彩象征 b> a> p> 相反,我建议您使用无序列表创建标签云。 这是几行HTML和CSS代码,但它确保无论谁来查看它,内容都是可读的。 HTML看起来像这样: 现在我们来看看有趣的部分 - CSS样式。 在设计标签云时,通常会更改字体大小和字体重量。 您还可以更改字体或背景的颜色或任何其他样式属性,但尺寸和重量都是传统的。 你需要10个样式类,每个标签等级一个: 我喜欢在云本身中包含一些样式:将云文本居中,设置行高以便云可读,并确保锚标记没有填充: 最后,如果您使用语义样式化方法(即无序列表),则需要再添加两行CSS,以便列表中没有项目符号并且没有缩进:
但标签云的风格在哪里?