这是H1标题示例
这是一段正文示例文本。这里展示了网站的主要内容区域样式，包括段落文本的格式和间距。这个网站采用紫色作为主色调，体现了优雅和专业的视觉感受。
这是H2标题示例 1
响应式设计确保网站在各种设备上都能提供良好的用户体验，从桌面电脑到平板电脑再到智能手机。侧边栏在移动设备上将变为可收起的菜单，方便用户浏览内容。
更新后的设计中，左右侧边栏都有独立的滚动条，不会随着主内容区域的滚动而滚动，保持在固定位置。这样用户在浏览长内容时，始终可以访问导航菜单。
按钮示例
以下是不同样式的按钮示例，它们采用了紫色主题并支持暗黑模式切换：
按钮具有悬停和点击效果，在不同的主题模式下会自动调整颜色以保持良好的对比度和视觉体验。
代码块示例
以下是代码块的展示效果，使用了与主题协调的配色方案：
// 紫色主题切换功能示例
function toggleTheme() {
const html = document.documentElement;
const isDark = html.classList.contains('dark-mode');
if (isDark) {
html.classList.remove('dark-mode');
localStorage.setItem('theme', 'light');
updateThemeUI(false);
} else {
html.classList.add('dark-mode');
localStorage.setItem('theme', 'dark');
updateThemeUI(true);
}
}
// 更新主题显示
function updateThemeUI(isDark) {
const icon = document.getElementById('themeIcon');
const text = document.getElementById('themeText');
if (isDark) {
icon.classList.remove('dark');
icon.classList.add('light');
text.textContent = '明亮模式';
} else {
icon.classList.remove('light');
icon.classList.add('dark');
text.textContent = '暗黑模式';
}
}
代码块具有语法高亮效果（模拟），并在暗黑模式下自动切换配色方案，确保代码的可读性。
区块示例
以下是内容区块的展示效果，可用于突出显示重要信息：
信息区块标题
这是一个标准的内容区块，可用于展示附加信息、提示或说明。区块采用了与整体主题协调的边框和背景色。
这是区块内的高亮文本，使用左侧边框突出显示重要内容。
区块元素在暗黑模式下会自动调整颜色，保持与整体主题的一致性和良好的可读性。
区块组件非常适合展示提示信息、警告内容或附加说明，可以帮助用户快速识别重要信息。
图片示例
以下是图片展示效果，点击图片可以查看大图，点击任意位置可退出大图模式。图片采用延迟加载，并有紫色动画填充效果：
图片已移除边框，下方两个角没有圆角处理，并且取消了鼠标悬停动画效果。点击图片可以查看大图，点击任意位置可退出大图模式。
这是图片下方的文本，现在已经与图片对齐。通过CSS样式的调整，确保了图片容器与周围文本在视觉上保持一致的对齐效果，提升了整体页面的美观度和可读性。
这是H2标题示例 2
网站使用纯HTML、CSS和JavaScript构建，不依赖任何框架，保持了代码的简洁性和高效性。这种方法可以减少加载时间，提高网站性能。
独立滚动的侧边栏特别适合内容丰富的网站，使用户可以在不丢失导航参考的情况下深入阅读内容。左侧菜单和右侧目录都可以独立滚动，互不影响。
这是H3标题示例
中间层级的标题用于组织更细致的内容结构，帮助用户理解内容的层次关系。良好的标题结构也有利于搜索引擎优化和无障碍访问。
这是H2标题示例 3
紫色主题给人以创造力和神秘感，适合多种类型的网站，包括创意工作室、艺术画廊、设计公司等。不同深浅的紫色搭配形成了和谐的视觉层次。
滚动条样式经过美化，与整体紫色主题保持一致，提升了用户体验。每个滚动区域（左侧菜单、主内容、右侧目录）都有自己的滚动条，操作更加直观。
这是H2标题示例 4
网站结构清晰，包括页眉、侧边栏、主内容区和页脚，符合现代网页设计的最佳实践。导航元素易于使用，内容组织合理，方便用户快速找到所需信息。
这是H5标题示例
最低层级的标题用于标识最细致的内容分段，在长篇文章中特别有用。合理使用不同层级的标题可以使内容结构清晰，易于阅读和理解。
更多内容示例，用于展示滚动效果。当页面内容足够长时，可以清晰地看到左侧和右侧边栏保持固定，只有主内容区域滚动。
这是额外的段落文本，增加页面长度以更好地展示滚动功能。侧边栏的独立滚动让用户可以在不丢失导航的情况下浏览长文章。
继续添加内容以确保页面有足够的滚动空间。用户体验设计是网站成功的关键因素之一，包括导航的便捷性、内容的可读性和交互的流畅性。
更多的文本内容，帮助展示页面滚动效果。一个好的网站应该在视觉上吸引人，同时提供清晰的信息架构和直观的用户界面。
额外的内容来增加页面长度，展示独立滚动效果。左右侧边栏有自己的滚动条，当内容超出视口高度时可以独立滚动。
继续添加内容以测试滚动效果。主内容区域的滚动不会影响侧边栏的位置，侧边栏始终保持在视野中，方便用户随时访问导航。
这是另一段文本，进一步延长页面。当用户滚动主内容时，侧边栏保持固定，用户可以随时查看和操作菜单，无需来回滚动页面。
最后一段示例文本，确保页面可以滚动足够的距离来观察独立滚动效果。每个区域的滚动都是独立的，提升了整体用户体验。