标签与CSS布局技术，满足通俗易懂且专业的需求：
一、基础结构搭建（左右分栏框架）
html
章节导航
1. 左侧主标题
- 1.1 左侧子标题一
- 1.2 左侧子标题二
2. 右侧主标题
- 2.1 右侧子标题一
- 2.2 右侧子标题二
二、样式设计要点（实现专业视觉效果）
css
/ 主容器设置 /
container {
display: flex; / 启用弹性盒子布局 /
justify-content: space-between; / 左右分栏间距自动调整 /
gap: 30px; / 栏间距 /
/ 公共标题样式 /
h2 {
font-size: 1.5em;
color: 2c3e50;
border-left: 4px solid 3498db; / 左侧装饰线 /
padding-left: 15px;
margin: 20px 0;
/ 左右栏统一设置 /
left-column, .right-column {
width: 48%; / 保留4%空间作为间隔 /
background: f9f9f9;
padding: 20px;
border-radius: 8px; / 圆角效果 /
box-shadow: 0 2px 5px rgba(0,0,0,0.1); / 柔和投影 /
/ 数字列表增强 /
ol {
counter-reset: section; / 重置计数器 /
padding-left: 1.2em;
li {
counter-increment: section; / 自动递增 /
margin: 10px 0;
li::before {
content: counters(section, ".") " "; / 生成多级编号 /
font-weight: bold;
color: e74c3c;
三、扩展功能说明（满足不同场景需求）
1. 多级标题支持
通过修改`li::before`中的计数器，可自动生成`1.1`、`1.2.1`等复合编号
2. 响应式布局
添加媒体查询，手机端自动切换为单栏显示：
css
@media (max-width: 768px) {
container { flex-direction: column; }
left-column, .right-column { width: 100%; }
3. 视觉强调方案
四、使用注意事项
1. 语义化原则
保持HTML结构清晰，每个对应独立内容区块
2. 样式覆盖问题
3. 浏览器兼容性
支持Chrome/Firefox/Edge等主流浏览器，IE需添加`-ms-flex`前缀
效果示例：
![左右分栏效果]
_图示：左侧为蓝色系标题区块，右侧为绿色系区块，包含自动生成的多级数字编号_
通过这套方案，读者可以快速建立专业级的内容导航系统，数字序号自动生成机制保障了长期维护的便捷性。实际使用时只需复制代码片段，修改文字内容即可获得标准化排版效果。