角标

优质

小牛编辑

120浏览

2023-12-01

红色角标

<ul class="ui-grid-halve">
    <li>
        <div class="ui-grid-halve-img" style="overflow:hidden;">
            <i class="ui-subscript ui-subscript-red">最新</i>
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
</ul>

橙色角标

<ul class="ui-grid-halve">
  <li>
      <div class="ui-grid-halve-img" style="overflow:hidden;">
          <i class="ui-subscript ui-subscript-orange">活动</i>
          <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
      </div>
  </li>
</ul>

绿色角标

<ul class="ui-grid-halve">
    <li>
        <div class="ui-grid-halve-img" style="overflow:hidden;">
            <i class="ui-subscript ui-subscript-green">限免</i>
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
</ul>

蓝色角标

<ul class="ui-grid-halve">
    <li>
        <div class="ui-grid-halve-img" style="overflow:hidden;">
            <i class="ui-subscript ui-subscript-blue">免费</i>
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
</ul>

三字角标

<ul class="ui-grid-halve">
    <li>
        <div class="ui-grid-halve-img" style="overflow:hidden;">
            <i class="ui-subscript ui-subscript-red ui-subscript-trisection">小表情</i>
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
</ul>