当前位置：首页 > CSS

css如何制作目录

2026-04-02 09:26:27CSS

使用纯CSS制作目录的方法

通过CSS的counter-reset和counter-increment属性可以实现自动编号的目录结构。以下是一个完整示例：

<style>
  /* 初始化计数器 */
  body {
    counter-reset: section;
  }

  /* 目录项样式 */
  .toc-item::before {
    counter-increment: section;
    content: counters(section, ".") " ";
  }

  /* 缩进子目录 */
  .toc-subitem {
    margin-left: 20px;
  }
</style>

<div class="toc">
  <div class="toc-item">第一章</div>
  <div class="toc-subitem">1.1 节</div>
  <div class="toc-subitem">1.2 节</div>

  <div class="toc-item">第二章</div>
  <div class="toc-subitem">2.1 节</div>
</div>

结合锚点跳转的目录

为目录添加点击跳转功能：

<style>
  .toc {
    position: fixed;
    left: 0;
    top: 0;
    width: 200px;
  }

  .toc a {
    display: block;
    padding: 5px 10px;
    color: #333;
    text-decoration: none;
  }

  .toc a:hover {
    background: #f0f0f0;
  }
</style>

<div class="toc">
  <a href="#sec1">第一节</a>
  <a href="#sec2">第二节</a>
</div>

<div id="sec1" style="margin-left: 220px;">
  <!-- 第一节内容 -->
</div>

响应式目录设计

针对移动设备的自适应目录：

@media (max-width: 768px) {
  .toc {
    position: static;
    width: 100%;
    border-bottom: 1px solid #ddd;
  }

  .toc-item {
    padding: 8px 0;
  }
}

美化目录样式

添加视觉增强效果：

css如何制作目录

.toc {
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border-radius: 4px;
  padding: 15px;
}

.toc-item {
  padding: 8px 12px;
  border-left: 3px solid #4CAF50;
  margin-bottom: 5px;
  transition: all 0.3s;
}

.toc-item:hover {
  background: #f5f5f5;
  transform: translateX(5px);
}

这些方法可以根据实际需求组合使用，创建出功能完善且美观的CSS目录。通过调整计数器、定位方式和响应式断点，可以适应各种网页布局需求。