css 制作目录

使用CSS制作目录的方法

CSS可以用于创建美观且结构清晰的目录，以下是几种常见的方法：

使用无序列表（ul）和样式化

通过无序列表创建目录结构，再利用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 {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
}

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

.toc li {
  padding: 5px 0;
  border-bottom: 1px dashed #ddd;
}

.toc a {
  text-decoration: none;
  color: #333;
}

.toc a:hover {
  color: #0066cc;
}

使用CSS计数器自动编号

为多级目录添加自动编号：

.toc {
  counter-reset: section;
}

.toc li {
  counter-increment: section;
}

.toc li:before {
  content: counters(section, ".") " ";
}

固定侧边栏目录

创建固定在页面一侧的目录：

.toc {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 200px;
  max-height: 90vh;
  overflow-y: auto;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  padding: 15px;
}

响应式目录设计

针对不同屏幕尺寸调整目录样式：

@media (max-width: 768px) {
  .toc {
    position: static;
    width: 100%;
    margin-bottom: 20px;
  }
}

添加交互效果

为目录项添加悬停和活动状态指示：

.toc li.active a {
  color: #0066cc;
  font-weight: bold;
}

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

这些方法可以根据具体需求组合使用，创建出功能完善且美观的目录系统。通过CSS的灵活样式控制，可以实现各种视觉效果和交互体验。