列表

定义<ul><ol><dl>标签样式。

无序列表

  • 使用.vus-ul类,作为<ul>标签样式。
  • 可添加的类有:
  • .disc:实心圆点。
  • .circle:空心圆点。
  • .square:实心正方形。
实心圆点
  • 关关雎鸠,在河之洲。
  • 窈窕淑女,君子好逑。
空心圆点
  • 参差荇菜,左右流之。
  • 窈窕淑女,寤寐求之。
实心正方形
  • 求之不得,寤寐思服。
  • 悠哉悠哉,辗转反侧。
混合
  • 参差荇菜,左右采之。
    • 窈窕淑女,琴瑟友之。
  • 参差荇菜,左右芼之。
    • 窈窕淑女,钟鼓乐之。
<!-- 实心圆点 -->
<ul class="vus-ul disc">
   <li>关关雎鸠,在河之洲。</li>
   ...
</ul>

<!-- 空心圆点 -->
<ul class="vus-ul circle">
   <li>参差荇菜,左右流之。</li>
   ...
</ul>

<!-- 实心正方形 -->
<ul class="vus-ul square">
   <li>求之不得,寤寐思服。</li>
   ...
</ul>

<!-- 混合 -->
<ul class="vus-ul square">
   <li>
      参差荇菜,左右采之。
      <ul class="vus-ul disc">
         <li>窈窕淑女,琴瑟友之。</li>
      </ul>
   </li>
   <li>
      参差荇菜,左右芼之。
      <ul class="vus-ul circle">
         <li>窈窕淑女,钟鼓乐之。</li>
      </ul>
   </li>
</ul>

有序列表

  • 使用.vus-ol类,作为<ol>标签样式。
  • 可添加的类有:
  • .number:常规数字。
  • .decimal:十进制数。
  • .lower-roman:小写罗马文字。
  • .upper-roman:大写罗马文字。
  • .lower-latin:小写拉丁文。
  • .upper-latin:大写拉丁文。
常规数字
  1. 当你老了,
  2. 头发花白,
  3. 睡意沉沉,
  4. 倦坐在炉边,
十进制数
  1. 取下这本书来,
  2. 慢慢读着,
  3. 追梦当年的眼神,
  4. 你那柔美的神采与深幽的晕影。
小写罗马文字
  1. 多少人爱过你昙花一现的身影,
  2. 爱过你的美貌,
  3. 以虚伪或真情,
  4. 惟独一人曾爱你那朝圣者的心,
大写罗马文字
  1. 爱过你的美貌,
  2. 以虚伪或真情,
  3. 惟独一人曾爱你那朝圣者的心,
  4. 爱过你的美貌,
小写拉丁文
  1. 以虚伪或真情,
  2. 惟独一人曾爱你那朝圣者的心,
  3. 爱你哀戚的脸上岁月的留痕。
  4. 在炉罩边低眉弯腰,
大写拉丁文
  1. 忧戚沉思,
  2. 喃喃而语,
  3. 爱情是怎样逝去,
  4. 又怎样步上群山,
  5. 怎样在繁星之间藏住了脸。
<!-- 常规数字 -->
<ol class="vus-ol number">
   <li>当你老了,</li>
   ...
</ol>

<!-- 十进制数 -->
<ol class="vus-ol decimal">
   <li>取下这本书来,</li>
   ...
</ol>

<!-- 小写罗马文字 -->
<ol class="vus-ol lower-roman">
   <li>多少人爱过你昙花一现的身影,</li>
   ...
</ol>

<!-- 大写罗马文字 -->
<ol class="vus-ol upper-roman">
   <li>爱过你的美貌,</li>
   ...
</ol>

<!-- 小写拉丁文 -->
<ol class="vus-ol lower-latin">
   <li>以虚伪或真情,</li>
   ...
</ol>

<!-- 大写拉丁文 -->
<ol class="vus-ol upper-latin">
   <li>忧戚沉思,</li>
   ...
</ol>

无样式列表

添加.none类,为.vus-ul.vus-ol类移除list-style样式。

ul
  • 当你老了,头发花白,
  • 睡意沉沉,倦坐在炉边,
ol
  1. 当你老了,头发花白,
  2. 睡意沉沉,倦坐在炉边,
<!-- ul -->
<ul class="vus-ul none">
   <li>当你老了,头发花白,</li>
   ...
</ul>

<!-- ol -->
<ol class="vus-ol none">
   <li>当你老了,头发花白,</li>
   ...
</ol>

内联列表

添加.inline类,为.vus-ul.vus-ol类设置display: inline-block;样式,并添加少量的内补(padding),将所有元素放置于同一行。

  • 关关雎鸠,
  • 在河之洲。
  • 窈窕淑女,
  • 君子好逑。
<!-- ul -->
<ul class="vus-ul inline">
   <li>关关雎鸠,</li>
   ...
</ul>

<!-- ol -->
<ol class="vus-ol inline">
   <li>关关雎鸠,</li>
   ...
</ol>

描述

使用.vus-dl类,作为<dl>标签样式,.dt类为<dt>标签样式,.dd类为<dd>标签样式。

《关雎》
关关雎鸠,在河之洲。窈窕淑女,君子好逑。
参差荇菜,左右流之。窈窕淑女,寤寐求之。
求之不得,寤寐思服。悠哉悠哉,辗转反侧。
参差荇菜,左右采之。窈窕淑女,琴瑟友之。
参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。
《桃花庵歌》
桃花坞裏桃花庵,桃花庵裏桃花仙。
桃花仙人种桃树,又折花枝当酒钱。
酒醒只在花前坐,酒醉还须花下眠。
花前花後日复日,酒醉酒醒年复年。
不愿鞠躬车马前,但愿老死花酒间。
车尘马足贵者趣,酒盏花枝贫者缘。
若将富贵比贫贱,一在平地一在天。
若将贫贱比车马,他得驱驰我得闲。
世人笑我忒风颠,我咲世人看不穿。
记得五陵豪杰墓,无酒无花锄作田。
<dl class="vus-dl">
   <dt class="dt">《关雎》</dt>
   <dd class="dd">
      关关雎鸠,在河之洲。窈窕淑女,君子好逑。
      ...
   </dd>
   <dt class="dt">《桃花庵歌》</dt>
   <dd class="dd">
      桃花坞裏桃花庵,桃花庵裏桃花仙。
      ...
   </dd>
</dl>

水平排列的描述

添加.horizontal类,当分辨率大于等于1024px,<dl>将以水平方向排列。

《关雎》
关关雎鸠,在河之洲。窈窕淑女,君子好逑。
参差荇菜,左右流之。窈窕淑女,寤寐求之。
求之不得,寤寐思服。悠哉悠哉,辗转反侧。
参差荇菜,左右采之。窈窕淑女,琴瑟友之。
参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。
《桃花庵歌》
桃花坞裏桃花庵,桃花庵裏桃花仙。
桃花仙人种桃树,又折花枝当酒钱。
酒醒只在花前坐,酒醉还须花下眠。
花前花後日复日,酒醉酒醒年复年。
不愿鞠躬车马前,但愿老死花酒间。
车尘马足贵者趣,酒盏花枝贫者缘。
若将富贵比贫贱,一在平地一在天。
若将贫贱比车马,他得驱驰我得闲。
世人笑我忒风颠,我咲世人看不穿。
记得五陵豪杰墓,无酒无花锄作田。
《宣州谢脁楼饯别校书叔云》
弃我去者,昨日之日不可留;
乱我心者,今日之日多烦忧。
长风万里送秋雁,对此可以酣高楼。
蓬莱文章建安骨,中间小谢又清发。
俱怀逸兴壮思飞,欲上青天览明月。
抽刀断水水更流,举杯销愁愁更愁。
人生在世不称意,明朝散发弄扁舟。
<dl class="vus-dl horizontal">
   <dt class="dt">《关雎》</dt>
   <dd class="dd">
      关关雎鸠,在河之洲。窈窕淑女,君子好逑。
      ...
   </dd>
   <dt class="dt">《桃花庵歌》</dt>
   <dd class="dd">
      桃花坞裏桃花庵,桃花庵裏桃花仙。
      ...
   </dd>
   <dt class="dt">《宣州谢脁楼饯别校书叔云》</dt>
   <dd class="dd">
      弃我去者,昨日之日不可留;
      ...
   </dd>
</dl>

列表组

常用于文章信息的列表显示,也可以组合成复杂的定制化内容。

链接列表
  • 使用.vus-list类,创建链接列表。
  • .item:项目,一般用于<li>标签。
  • .link:链接,一般用于<a>标签。
<ul class="vus-list">
   <li class="item">
      <a class="link" href="#">山有木兮木有枝,心悦君兮君不知。____佚名《越人歌》</a>
   </li>
   <li class="item">
      <a class="link" href="#">人生若只如初见,何事秋风悲画扇。____纳兰性德《木兰词·拟古决绝词柬友》</a>
   </li>
   ...
</ul>
纯文字列表

添加.text类,以纯文字展示。

  • 只愿君心似我心,定不负相思意。____李之仪《卜算子·我住长江头》
  • 人生如逆旅,我亦是行人。____苏轼《临江仙·送钱穆父》
  • 平生不会相思,才会相思,便害相思。____徐再思《折桂令·春情》
  • 愿得一心人,白头不相离。____卓文君《白头吟》
  • 山无陵,江水为竭。冬雷震震,夏雨雪。天地合,乃敢与君绝。____佚名《上邪》
<ul class="vus-list text">
   <li class="item>
      只愿君心似我心,定不负相思意。____李之仪《卜算子·我住长江头》
   </li>
   <li class="item>
      人生如逆旅,我亦是行人。____苏轼《临江仙·送钱穆父》
   </li>
   ...
</ul>
带边框列表

添加.bordered类,设置边框。

有链接
无链接
  • 富贵必从勤苦得,男儿须读五车书。____杜甫《柏学士茅屋》
  • 独上江楼思渺然,月光如水水如天。____赵嘏《江楼旧感》
  • 莫笑农家腊酒浑,丰年留客足鸡豚。____陆游《游山西村》
<ul class="vus-list bordered">
   <li class="item>
      <a class="link href="#">青青子衿,悠悠我心。____佚名《子衿》</a>
   </li>
   <li class="item>
      <a class="link href="#">众里寻他千百度。蓦然回首,那人却在,灯火阑珊处。____辛弃疾《青玉案·元夕》</a>
   </li>
   ...
</ul>

<ul class="vus-list text bordered">
   <li class="item>
      富贵必从勤苦得,男儿须读五车书。____杜甫《柏学士茅屋》
   </li>
   <li class="item>
      独上江楼思渺然,月光如水水如天。____赵嘏《江楼旧感》
   </li>
   ...
</ul>
斑马纹

添加.striped类,设置条纹效果。

有链接
无链接
  • 凉月如眉挂柳湾,越中山色镜中看。____戴叔伦《兰溪棹歌》
  • 招魂楚些何嗟及,山鬼暗啼风雨。____元好问《摸鱼儿·雁丘词 / 迈陂塘》
  • 四月十七,正是去年今日,别君时。____韦庄《女冠子·四月十七》
  • 忆昔花间相见后,只凭纤手,暗抛红豆。____欧阳炯《贺明朝·忆昔花间相见后》
  • 待浮花、浪蕊都尽,伴君幽独。____苏轼《贺新郎·夏景》
<ul class="vus-list bordered striped">
   <li class="item>
      <a class="link href="#">笑尽一杯酒,杀人都市中。____李白《结客少年场行》</a>
   </li>
   <li class="item>
      <a class="link href="#">十步杀一人,千里不留行。____李白《侠客行》</a>
   </li>
   ...
</ul>

<ul class="vus-list text bordered striped">
   <li class="item>
      凉月如眉挂柳湾,越中山色镜中看。____戴叔伦《兰溪棹歌》
   </li>
   <li class="item>
      招魂楚些何嗟及,山鬼暗啼风雨。____元好问《摸鱼儿·雁丘词
   </li>
   ...
</ul>
鼠标悬停

添加.hover类,设置鼠标悬停状态。

有链接
无链接
  • 富贵必从勤苦得,男儿须读五车书。____杜甫《柏学士茅屋》
  • 独上江楼思渺然,月光如水水如天。____赵嘏《江楼旧感》
  • 莫笑农家腊酒浑,丰年留客足鸡豚。____陆游《游山西村》
<ul class="vus-list hover">
   <li class="item>
      <a class="link href="#">青青子衿,悠悠我心。____佚名《子衿》</a>
   </li>
   <li class="item>
      <a class="link href="#">众里寻他千百度。蓦然回首,那人却在,灯火阑珊处。____辛弃疾《青玉案·元夕》</a>
   </li>
   ...
</ul>

<ul class="vus-list text hover">
   <li class="item>
      富贵必从勤苦得,男儿须读五车书。____杜甫《柏学士茅屋》
   </li>
   <li class="item>
      独上江楼思渺然,月光如水水如天。____赵嘏《江楼旧感》
   </li>
   ...
</ul>
组合使用一

加入徽章、日期等等。

热门排行榜
推荐内容
<ul class="vus-list">
   <li class="item>
      <a class="link href="#">
         <span class="vus-badge">01</span> 山有木兮木有枝,心悦君兮君不知。____佚名《越人歌》
      </a>
   </li>
   <li class="item>
      <a class="link href="#">
         <span class="vus-badge">02</span> 人生若只如初见,何事秋风悲画扇。____纳兰性德《木兰词·拟古决绝词柬友》
      </a>
   </li>
   ...

   <li class="item>
      <a class="link href="#">
         <span class="vus-badge vus-fr pill vus-mt-2">99+</span> 两情若是久长时,又岂在朝朝暮暮。____秦观《鹊桥仙·纤云弄巧》
      </a>
   </li>
   <li class="item>
      <a class="link href="#">
         <span class="vus-fr">2018-06-02</span> 入我相思门,知我相思苦。____李白《三五七言 / 秋风词》
      </a>
   </li>
</ul>
组合使用二

加入文本截断、文本颜色等等。

有链接
无链接
  • 当标题非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长
  • 今我来思,雨雪霏霏。____佚名《采薇》
  • 相寻梦里路,飞雨落花中。____晏几道《临江仙·斗草阶前初见》
<ul class="vus-list">
   <li class="item>
      <a href="#" class="link vus-text-ellipsis">当标题非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长</a>
   </li>
   <li class="item>
      <a href="#" class="link vus-color--danger">浊酒一杯家万里,燕然未勒归无计。____范仲淹《渔家傲·秋思》</a>
   </li>
   ...
   <li class="item vus-text-ellipsis">
      当标题非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长
   </li>
   <li class="item vus-color--violet">
      今我来思,雨雪霏霏。____佚名《采薇》
   </li>
</ul>