HTML 代码实现可伸缩目录栏：示例与解释

以下是使用 HTML 和 CSS 代码实现一个可手动拖动伸缩的左侧目录栏，并显示目录标题和章节列表的示例，以及代码解释：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
        }
        
        .sidebar {
            width: 25%;
            min-width: 200px;
            max-width: 400px;
            background-color: #f1f1f1;
            overflow-x: hidden;
            resize: horizontal;
            border-right: 1px solid #ccc;
        }
        
        .content {
            flex-grow: 1;
            padding: 20px;
        }
        
        .sidebar h2 {
            text-align: center;
        }
        
        .sidebar ul {
            list-style-type: none;
            padding: 0;
            margin: 20px 0;
        }
        
        .sidebar li {
            color: #888;
        }
        
        .sidebar li:hover {
            color: #000;
        }
    </style>
</head>
<body>
    <div class='sidebar'>
        <h2>目录</h2>
        <ul>
            <li>章节1</li>
            <li>章节2</li>
            <li>章节3</li>
        </ul>
    </div>
    <div class='content'>
        <h1>主要内容</h1>
        <p>这里是主要内容的描述。</p>
    </div>
</body>
</html>

这段代码中，使用了 Flex 布局来实现左边显示目录栏和右边显示主要内容。目录栏使用了.sidebar 类来定义样式，其中width 属性设置为 25%，即相对页面宽度的 1/4。通过resize: horizontal; 属性可以手动拖动伸缩目录栏的宽度。目录二字使用<h2> 标签，并设置text-align: center; 来实现相对居中。章节列表使用<ul> 和<li> 标签，并设置一些基本的样式。主要内容部分使用.content 类来定义样式，flex-grow: 1; 属性使其自动填充剩余空间。

代码解释：

body：设置页面边距和填充为 0，并使用display: flex; 使页面内容采用 Flex 布局。
.sidebar：
- width: 25%;：设置目录栏宽度为页面宽度的 1/4。
- min-width: 200px;：设置目录栏最小宽度为 200 像素。
- max-width: 400px;：设置目录栏最大宽度为 400 像素。
- background-color: #f1f1f1;：设置目录栏背景颜色为灰色。
- overflow-x: hidden;：隐藏水平滚动条。
- resize: horizontal;：允许水平方向拖动调整目录栏宽度。
- border-right: 1px solid #ccc;：设置目录栏右侧边框。
.content：
- flex-grow: 1;：设置主要内容部分自动填充剩余空间。
- padding: 20px;：设置主要内容部分内边距。
.sidebar h2：
- text-align: center;：设置目录标题文字居中显示。
.sidebar ul：
- list-style-type: none;：移除列表项的默认符号。
- padding: 0;：设置列表内边距为 0。
- margin: 20px 0;：设置列表上下边距。
.sidebar li：
- color: #888;：设置章节列表文字颜色为灰色。
.sidebar li:hover：
- color: #000;：当鼠标悬停在章节列表项上时，文字颜色变为黑色。

注意，这段代码中只是一个示例，你可以根据自己的需求进行修改和扩展。例如，你可以添加更多章节、修改样式或使用 JavaScript 来实现更复杂的功能。