一、VivoQQ图标如何显示消息数

VivoQQ是一款非常流行的社交软件，它的图标在手机桌面上经常显示未读消息的数量。这种功能是通过在图标上显示一个红色的小圆点或者数字来实现的。

二、使用HTML标签显示消息数

在HTML中，可以使用以下标签来实现图标显示消息数：

• <span>标签：可以用来显示一个文本，例如：

  <span>3</span>

• <div>标签：可以用来包裹其他元素，例如：

  <div>3</div>

三、使用CSS样式修饰图标

除了使用HTML标签来显示消息数，还可以使用CSS样式来修饰图标：

  <style>
    .icon {
      position: relative;
    }
    .badge {
      position: absolute;
      top: -5px;
      right: -10px;
      background-color: red;
      color: white;
      border-radius: 50%;
      padding: 2px 5px;
    }
  </style>

  <div class="icon">
    <img src="vivoqq_icon.png" alt="VivoQQ图标">
    <span class="badge">3</span>
  </div>

四、去除图标中的所有图片

如果你想去除图标中的所有图片，只显示文本消息数，可以使用以下代码：

  <style>
    .icon {
      position: relative;
    }
    .badge {
      position: absolute;
      top: -5px;
      right: -10px;
      background-color: red;
      color: white;
      border-radius: 50%;
      padding: 2px 5px;
    }
    .icon img {
      display: none;
    }
  </style>

  <div class="icon">
    <span class="badge">3</span>
  </div>

通过上面的方法，你可以根据需要自定义VivoQQ图标上显示消息数的样式，并且去除图标中的图片。

五、总结

通过HTML和CSS的组合运用，我们可以实现VivoQQ图标上显示消息数的效果，并且可以根据需求自定义样式。希望本文对你有所帮助！