share555

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
AmazingCounters.com
查看: 95|回复: 0

使用HTML和CSS实现的标签云效果(附demo)

[复制链接]

375

主题

727

帖子

2052

积分

金牌会员

Rank: 6Rank: 6

积分
2052
发表于 2021-3-17 11:32:38 | 显示全部楼层 |阅读模式

标签云的效果在博客和网站上不难见到,它其实就是带有超链接的某些关键字,为了达到强调主题的作用。通常出现概率比较大或者受欢迎的标签文字显示比较大,相反的就显示的小。

脚本之家-share555利用HTML和CSS实现的标签云结果(附demo)(1)

来源于TagCrowd.com

我们就不去深入研究标签云带来的效率上的提升和可用性的细节,仅仅在外观上带来的美感和对全站或一整篇文章所起到的高度概括的作用就不容忽视了。

接下来,我们将讨论如何用HTML和CSS来创建标签云效果。注意,我们仅仅讨论如何实现这种UI效果而不去深究标签的权重或受欢迎程度是怎么算出来的。

HTML基础结构

前面说了,标签云就是一个连接列表。所以从语义化的视角,使用无序列表来表达每个标签是合理的,不用考虑按欢迎程度去排列,否则就毫无意义了。

在每个列表项里包含一个超链接标签,所以大体结构就是下面的样子:

  1. <ul>
  2. <li><a href=&quot;/tag/word1&quot;>Word1</a></li>
  3. <li><a href=&quot;/tag/word2&quot;>Word2</a></li>
  4. <li><a href=&quot;/tag/word3&quot;>Word3</a></li>
  5. <!-- ... -->
  6. </ul>
复制代码

每个标签的权重要提前算好,然后把它加到 上或者

  • 上,我们就暂且把它加到链接上。

    权重大的标签对应显示的文字也大,代表了它的受欢迎程度大。

    1. <ul>
    2. <li><a href=&quot;/tag/word1&quot; data-weight=&quot;3&quot;>Word1</a></li>
    3. <li><a href=&quot;/tag/word2&quot; data-weight=&quot;7&quot;>Word2</a></li>
    4. <li><a href=&quot;/tag/word3&quot; data-weight=&quot;4&quot;>Word3</a></li>
    5. <!-- ... -->
    6. </ul>
    复制代码

    注意:这里的data-weight是通过data-count和data-total计算而来的,这里没办法直接通过两个属性计算表示,所以我们把目标聚焦在data-weight这样一个属性上。

    这样基础的HTML结构代码就写好了,只要稍加一些属性就完美了。

    • class:有助于在添加样式的时候确定是哪个标签云
    • role:这个是一个导航组件,在屏幕阅读器上标识和辅助作用
    • aria-label:给辅助功能添加标题和描述

    注意:如果列表位于

  • 本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|分享论坛

    GMT+8, 2021-6-13 12:23 , Processed in 0.121344 second(s), 21 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表