ol 无序列表，卡片列表设计，在线预览HTML/Vue

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

<ol class="cards">
  <li class="card" style="--accent-color: #0f6493">
    <h2>选项卡标题</h2>
    <p>这段文字没有任何特定的含义，它只是模拟真实的文字内容，以展示字体、版式和布局等设计元素。占位文本可以帮助设计师专注于页面的视觉效果，而不会被实际内容的含义所干扰。</p>
    <svg class="i" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12c0 1.6.376 3.112 1.043 4.453c.178.356.237.763.134 1.148l-.595 2.226a1.3 1.3 0 0 0 1.591 1.592l2.226-.596a1.634 1.634 0 0 1 1.149.133A9.958 9.958 0 0 0 12 22m-4-8.75a.75.75 0 0 0 0 1.5h5.5a.75.75 0 0 0 0-1.5zm-.75-2.75A.75.75 0 0 1 8 9.75h8a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75" clip-rule="evenodd"/></svg>
  </li>
  
  <li class="card" style="--accent-color: #00abb2">
    <h2>选项卡标题</h2>
    <p>这段文字没有任何特定的含义，它只是模拟真实的文字内容，以展示字体、版式和布局等设计元素。占位文本可以帮助设计师专注于页面的视觉效果，而不会被实际内容的含义所干扰。</p>
    <svg class="i" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M9.25 4a2.75 2.75 0 1 1 5.5 0a2.75 2.75 0 0 1-5.5 0" clip-rule="evenodd"/><path fill="currentColor" d="m8.223 11.574l-2.175-.725a1.532 1.532 0 0 1 .805-2.952l1.898.407l.21.044a15 15 0 0 0 6.288-.044l1.897-.407a1.532 1.532 0 0 1 .806 2.952l-2.175.725c-.263.088-.394.132-.493.193a1 1 0 0 0-.466.986c.016.115.066.244.165.503l1.247 3.242a1.473 1.473 0 0 1-2.654 1.26L12 15l-1.576 2.757a1.473 1.473 0 0 1-2.654-1.26l1.247-3.241c.1-.259.149-.388.165-.503a1 1 0 0 0-.466-.986c-.099-.061-.23-.105-.493-.193"/><path fill="currentColor" d="M12 22c5.523 0 10-2.015 10-4.5c0-1.722-2.15-3.218-5.306-3.975l.936 2.434c.749 1.948-.688 4.04-2.775 4.04a2.973 2.973 0 0 1-2.581-1.497l-.274-.48l-.274.48A2.973 2.973 0 0 1 9.147 20c-2.087 0-3.525-2.093-2.776-4.041l.936-2.434C4.149 14.282 2 15.778 2 17.5C2 19.985 6.477 22 12 22"/></svg>
  </li>
  
  <li class="card" style="--accent-color: #8bba38">
    <h2>选项卡标题</h2>
    <p>这段文字没有任何特定的含义，它只是模拟真实的文字内容，以展示字体、版式和布局等设计元素。占位文本可以帮助设计师专注于页面的视觉效果，而不会被实际内容的含义所干扰。</p>
    <svg class="i" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20 13.75a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75v6.75H14V4.25c0-.728-.002-1.2-.048-1.546c-.044-.325-.115-.427-.172-.484c-.057-.057-.159-.128-.484-.172C12.949 2.002 12.478 2 11.75 2c-.728 0-1.2.002-1.546.048c-.325.044-.427.115-.484.172c-.057.057-.128.159-.172.484c-.046.347-.048.818-.048 1.546V20.5H8V8.75A.75.75 0 0 0 7.25 8h-3a.75.75 0 0 0-.75.75V20.5H1.75a.75.75 0 0 0 0 1.5h20a.75.75 0 0 0 0-1.5H20z"/></svg>
  </li>
  
  <li class="card" style="--accent-color: #cddc29">
    <h2>选项卡标题</h2>
    <p>这段文字没有任何特定的含义，它只是模拟真实的文字内容，以展示字体、版式和布局等设计元素。占位文本可以帮助设计师专注于页面的视觉效果，而不会被实际内容的含义所干扰。</p>
    <svg class="i" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M10.847 21.934C5.867 21.362 2 17.133 2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.157-3.283 4.733-6.086 4.37c-1.618-.209-3.075-.397-3.652.518c-.395.626.032 1.406.555 1.929a1.673 1.673 0 0 1 0 2.366c-.523.523-1.235.836-1.97.751M11.085 7a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0M6.5 13a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m11 0a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m-3-4.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3" clip-rule="evenodd"/></svg>
  </li>
</ol>

</body>

CSS

格式化

body {
    margin: 0;
    background-color: #f5f5f5;
    font-family: system-ui, sans-serif
}

ol.cards {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(25ch, 100%), 1fr));
    padding: 2rem;

    margin: 0;
    list-style: none;
    counter-reset: cardCount;
}

ol.cards>.card {
    color: hsl(0 0% 40%);
    background-color: #ffffff;
    text-align: center;

    padding: 2rem;
    border-radius: .5rem;
    box-shadow: .5rem .5rem 1rem hsl(0 0% 0% / .25);

    position: relative;
    counter-increment: cardCount;
}

ol.cards>.card::before {
    --top: 1.5rem;
    --left: -1rem;

    content: "列表项 " counter(cardCount, decimal-leading-zero);
    color: hsl(0 0% 100%);

    padding: 0.5rem 1rem;
    background-color: var(--accent-color);
    border-radius: 0 0 .5rem .5rem;
    box-shadow: -0.125rem 0.125rem 0.25rem hsl(0 0% 0% / .25);

    /* position */
    position: absolute;
    top: 0;
    right: 100%;
    transform-origin: top right;
    transform: rotate(-90deg) translate(calc(var(--top) * -1), var(--left));
    white-space: nowrap;
}

ol.cards>.card>.i {
    color: var(--accent-color);
    width: 2rem;
    height: 2rem;
}

ol.cards>.card>h2 {
    font-weight: 400;
    color: var(--accent-color);
    margin-top: 0;
}

格式化

预览

控制台