HTML 代码示例：左侧目录栏实现及样式设置
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
}
.sidebar {
width: 200px;
background-color: #f0f0f0;
padding: 20px;
}
.directory {
text-align: center;
font-weight: bold;
margin-bottom: 10px;
}
.chapter {
color: gray;
margin-bottom: 5px;
}
.content {
flex-grow: 1;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="directory">
目录
</div>
<div class="chapter">
章节1
</div>
<div class="chapter">
章节2
</div>
<div class="chapter">
章节3
</div>
</div>
<div class="content">
<!-- 这里是主要内容 -->
</div>
</div>
</body>
</html>
在上面的代码中，我们使用了Flex布局来实现左侧目录栏和右侧内容区域的对齐。左侧目录栏使用了一个带有背景颜色和内边距的`sidebar`类，其中目录二字使用了`directory`类，并且设置了居中对齐和加粗。章节使用了`chapter`类，并设置了灰色。右侧内容区域使用了`content`类，并设置了自动增长以占据剩余空间。
原文地址: https://www.cveoy.top/t/topic/qqM7 著作权归作者所有。请勿转载和采集!