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的灵活样式控制，可以实现各种视觉效果和交互体验。
