标签云：玩转CSS和JavaScript，让标签随心动起来

我一直很喜欢标签云，因为它可以通过标签的相对字体大小直观地呈现网站上最受欢迎的标签。标签越流行，字体就越大。那么制作一个标签云有多难呢？其实一点也不难。让我们开始吧！

对于HTML，我们将使用无序列表<ul class=“tags”><ul> 来包含每个标签。接下来，我们将使用JavaScript来动态调整字体大小，代码如下：

const tags = document.querySelectorAll('.tags li');
const fontSizeArray = [12, 14, 16, 18, 20, 22, 24];

function calculateFontSize(tagCount) {
  // 根据标签数量计算字体大小
  if (tagCount <= 10) {
    return fontSizeArray[0];
  } else if (tagCount > 10 && tagCount <= 20) {
    return fontSizeArray[1];
  } else if (tagCount > 20 && tagCount <= 30) {
    return fontSizeArray[2];
  } else if (tagCount > 30 && tagCount <= 40) {
    return fontSizeArray[3];
  } else if (tagCount > 40 && tagCount <= 50) {
    return fontSizeArray[4];
  } else if (tagCount > 50 && tagCount <= 60) {
    return fontSizeArray[5];
  } else if (tagCount > 60) {
    return fontSizeArray[6];
  }
}

for (let i = 0; i < tags.length; i++) {
  // 获取标签的计数
  const tagCount = parseInt(tags[i].dataset.count);
  // 根据计数设置字体大小
  tags[i].style.fontSize = `${calculateFontSize(tagCount)}px`;
}

在CSS中，我们将设置<ul class=“tags”><ul> 的样式，包括文本对齐、内边距和列表样式：

ul.tags {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

最后，为了让标签云更具美感，我们可以添加一些额外的样式，例如边框、圆角和阴影：

ul.tags li {
  display: inline-block;
  padding: 5px 10px;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px #ccc;
}

这样，一个简单的标签云就完成了。当然，你可以根据自己的喜好进一步自定义样式。

玩转CSS和JavaScript，标签云的呈现将变得更加灵活多变，让网站变得更加生动有趣。