css制作目录

CSS 制作目录的方法

使用 CSS 可以创建一个美观且功能性的目录（TOC），以下是几种常见方法：

使用无序列表和样式

通过 <ul> 和 <li> 标签创建目录结构，并用 CSS 美化：

<div class="toc">
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
</div>

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

.toc li {
  margin-bottom: 8px;
}

.toc a {
  text-decoration: none;
  color: #333;
  padding: 4px 8px;
  border-left: 3px solid #3498db;
}

.toc a:hover {
  background-color: #f0f0f0;
}

自动生成目录

结合 JavaScript 可以动态生成目录，CSS 负责样式：

// 假设页面有 h2 标题
const headings = document.querySelectorAll('h2');
const toc = document.querySelector('.toc ul');

headings.forEach(heading => {
  const li = document.createElement('li');
  const a = document.createElement('a');
  a.textContent = heading.textContent;
  a.href = `#${heading.id}`;
  li.appendChild(a);
  toc.appendChild(li);
});

多级嵌套目录

对于多级标题（如 h2、h3），可以使用嵌套列表：

.toc ul ul {
  margin-left: 20px;
  border-left: 1px solid #ddd;
}

.toc ul ul li {
  margin-bottom: 4px;
}

固定位置目录

使目录在滚动时保持可见：

.toc {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 200px;
  max-height: 80vh;
  overflow-y: auto;
}

响应式设计

在小屏幕上隐藏或调整目录：

@media (max-width: 768px) {
  .toc {
    display: none;
  }
}

添加图标或编号

使用 CSS 伪元素增强视觉效果：

.toc li::before {
  content: "•";
  color: #3498db;
  margin-right: 8px;
}

这些方法可以根据具体需求组合使用，创建出符合项目风格的目录。