当前位置：首页 > CSS

css 制作目录

2026-02-26 22:48:05CSS

CSS 制作目录的方法

使用 CSS 可以轻松创建美观且功能性的目录。以下是几种常见的实现方式：

使用无序列表和样式

通过无序列表 <ul> 和 <li> 标签构建目录结构，并用 CSS 控制样式：

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

.toc {
  list-style-type: none;
  padding-left: 0;
}
.toc li {
  margin: 8px 0;
}
.toc a {
  text-decoration: none;
  color: #333;
}
.toc a:hover {
  color: #0066cc;
}

添加缩进层级

对于多级目录，可以使用嵌套列表和缩进：

.toc ul {
  padding-left: 20px;
}

使用计数器自动编号

CSS 计数器可实现自动编号的目录：

body {
  counter-reset: section;
}
.toc li:before {
  counter-increment: section;
  content: counter(section) ". ";
}

固定位置目录

让目录始终保持在可视区域：

.toc-container {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 200px;
}

响应式设计

添加媒体查询确保在不同设备上正常显示：

@media (max-width: 768px) {
  .toc-container {
    position: static;
    width: auto;
  }
}

美化样式选项

增强视觉效果：

css 制作目录

.toc {
  background: #f5f5f5;
  border-left: 4px solid #0066cc;
  padding: 15px;
  border-radius: 4px;
}
.toc li {
  padding: 5px 0;
  border-bottom: 1px dashed #ddd;
}

这些方法可以单独或组合使用，根据具体需求调整样式和结构参数。