css 制作目录

CSS 制作目录的方法

使用 CSS 可以轻松为网页内容创建美观且功能性的目录。以下是几种常见方法：

使用 ul 和 li 创建基础目录结构

<div class="toc">
  <ul>
    <li><a href="#section1">第一节</a></li>
    <li><a href="#section2">第二节</a></li>
    <li><a href="#section3">第三节</a></li>
  </ul>
</div>

.toc {
  border-left: 3px solid #3498db;
  padding-left: 15px;
  margin: 20px 0;
}

.toc ul {
  list-style-type: none;
  padding: 0;
}

.toc li {
  margin: 8px 0;
}

.toc a {
  text-decoration: none;
  color: #2c3e50;
  transition: color 0.3s;
}

.toc a:hover {
  color: #3498db;
}

自动生成带编号的目录

通过 CSS 计数器实现自动编号：

body {
  counter-reset: section;
}

.toc ol {
  counter-reset: subsection;
  list-style-type: none;
}

.toc ol li:before {
  counter-increment: section;
  content: counters(section, ".") " ";
}

固定侧边栏目录

当页面滚动时保持目录可见：

.toc {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 250px;
  max-height: 90vh;
  overflow-y: auto;
}

响应式目录设计

适应不同屏幕尺寸：

@media (max-width: 768px) {
  .toc {
    position: static;
    width: 100%;
    max-height: none;
  }
}

添加视觉层次

通过缩进显示目录层级：

.toc li.level1 { padding-left: 0; }
.toc li.level2 { padding-left: 20px; }
.toc li.level3 { padding-left: 40px; }

高亮当前浏览章节

使用 JavaScript 动态添加活动类：

.toc a.active {
  color: #e74c3c;
  font-weight: bold;
}

这些方法可以根据具体需求组合使用，创建出既美观又实用的网页目录结构。