跳到正文

列表

一行一项的列表：主文字、说明、右侧附加内容（标签、时间、按钮），行之间有分隔线。zh-list--bordered 加外框，zh-list--hover 悬停高亮，zh-list--plain 是带圆点的普通列表。

纯样式 核心包

示例

  • 产品发布会回顾

    李明 · 2026-10-04

    已发布

  • 季度运营复盘

    王芳 · 2026-10-04

    待审核

在线试用 Markdown 版

代码

<ul class="zh-list zh-list--bordered">
  <li><div class="zh-list-main"><p class="zh-list-title">产品发布会回顾</p><p class="zh-list-desc">李明 · 2026-10-04</p></div><div class="zh-list-extra"><span class="zh-tag success">已发布</span></div></li>
  <li><div class="zh-list-main"><p class="zh-list-title">季度运营复盘</p><p class="zh-list-desc">王芳 · 2026-10-04</p></div><div class="zh-list-extra"><span class="zh-tag warning">待审核</span></div></li>
</ul>

属性

属性用在取值说明
zh-list<ul>（class）每个 <li> 里放 zh-list-main，可再放 zh-list-extra列表容器
zh-list-title / zh-list-desc<li> 里的 <p>主文字（加粗，单行省略）与说明
zh-list-extra<li> 里的容器右侧附加内容，不会被挤压
zh-list--bordered.zh-list圆角外框和底色
zh-list--hover.zh-list悬停整行高亮；整行可点时请把内容放进 <a>
zh-list--plain.zh-list普通圆点列表，用于文章里的要点

样式类

zh-list　zh-list-main　zh-list-title　zh-list-desc　zh-list-extra　zh-list--bordered　zh-list--hover　zh-list--plain

无障碍

  • 用 <ul>/<li> 保持列表语义
  • 整行可点击时，用一个覆盖整行的 <a>，不要给 <li> 绑点击

常见问题

列表是什么？

一行一项的列表：主文字、说明、右侧附加内容（标签、时间、按钮），行之间有分隔线。zh-list--bordered 加外框，zh-list--hover 悬停高亮，zh-list--plain 是带圆点的普通列表。

怎么使用列表？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

列表支持键盘和读屏吗？

用 <ul>/<li> 保持列表语义；整行可点击时，用一个覆盖整行的 <a>，不要给 <li> 绑点击。

列表需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。