这是一个网页样式设计参考

量子态叠加模拟

实时展示两个量子比特在叠加状态下的概率分布，用户可通过拖拽调整参数，观察波函数的变化。

纠缠粒子生成器

提供交互式界面，生成一对纠缠粒子，并通过3D动画展示其关联性。

量子门操作演示

以动态图表形式呈现Hadamard门、CNOT门等量子逻辑门的操作过程及其对量子态的影响。

色彩与主题设计

主色调采用深灰（#121212）和黑色（#000000），辅以蓝紫色（#6C5CE7）和青绿色（#1ABC9C）作为点缀色，营造科幻氛围。

.gradient-background {
    background: linear-gradient(135deg, #6C5CE7, #1ABC9C);
    height: 100vh;
}

排版与字体设计

标题使用粗体 Roboto 字体，正文选用 Open Sans，确保信息清晰易读。

body {
    font-family: 'Open Sans', sans-serif;
}

h1, h2, h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
}

布局与模块化设计

基于网格系统，模块之间留白得当，增强用户体验。

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.module {
    background-color: #121212;
    border-radius: 8px;
    padding: 16px;
}

动画与交互效果

按钮点击时的涟漪扩散效果增强互动性。

.button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
}

图标与图形设计

简洁的原子结构符号和电路板图案融入页面。

响应式与无障碍设计

媒体查询适配不同设备，确保良好的用户体验。

@media (max-width: 768px) {
    .module {
        width: 100%;
    }
}

社区热点话题排行榜

显示近期最受关注的问题及解决方案，鼓励参与讨论。