卡卡網(wǎng)

索引目錄列表十分常見(jiàn)，例如購(gòu)物時(shí)看到的商品品牌陳列顯示，按字母或按其他標(biāo)準(zhǔn)排序，以方便用戶快速找到所需的商品。本文介紹一個(gè)純CSS實(shí)現(xiàn)的索引目錄列表樣式。

demodownload

HTML

<div class="floating-stack">
  <dl>
    <div>
      <dt>A</dt>
      <dd>Algeria</dd>
      <dd>Angola</dd>
    </div>

    <div>
      <dt>B</dt>
      <dd>Benin</dd>
      <dd>Botswana</dd>
      <dd>Burkina Faso</dd>
      <dd>Burundi</dd>
    </div>

    <div>
      <dt>C</dt>
      <dd>Cabo Verde</dd>
      <dd>Cameroon</dd>
      <dd>Central African Republic</dd>
      <dd>Chad</dd>
      <dd>Comoros</dd>
      <dd>Congo, Democratic Republic of the</dd>
      <dd>Congo, Republic of the</dd>
      <dd>Cote d'Ivoire</dd>
    </div>

    <div>
      <dt>D</dt>
      <dd>Djibouti</dd>
    </div>

    <div>
      <dt>E</dt>
      <dd>Egypt</dd>
      <dd>Equatorial Guinea</dd>
      <dd>Eritrea</dd>
      <dd>Eswatini (formerly Swaziland)</dd>
      <dd>Ethiopia</dd>
    </div>
  </dl>
</div>

盒子是一個(gè)dl，它定義盒子的大小等屬性，其內(nèi)部每一個(gè)div，就是一個(gè)索引目錄類別，該div里的dt是索引目錄標(biāo)題，而dd則是索引目錄的列表內(nèi)容。

CSS

dt {
  position: sticky;
  top: 0;
  background: white;
  display: inline-block;
  font-weight: bold;
  background: #253238;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
  color: #c2cccf;
}

dl {
  background: #455a64;
  width: fit-content;
  padding: 1rem;
  max-height: 250px;
  overflow: auto;
  border-radius: 20px;
}

dd {
  margin-inline-start: 3.2rem;
  margin-block-end: 0.5rem;
}

相關(guān)文章

• 4款簡(jiǎn)單常見(jiàn)的純CSS表格(table)樣式
• 漂亮的CSS下拉菜單設(shè)計(jì)
• CSS的odd和even屬性實(shí)現(xiàn)table表格tr單雙行顏色相間而不同

標(biāo)簽: 索引列表樣式  目錄列表樣式