这是一个基于您的需求生成的完整HTML单页文件。 设计说明: 1. 布局风格:采用了全宽沉浸式+多栏卡片式布局,区别于传统的侧边栏或单栏博客布局。使用了大量的CSS Grid和Flexbox,确保视觉上的丰富度。 2. 色彩系统:严格遵循要求,主体色为 `#a30000` (深红/勃艮第红),辅助色使用深灰、浅灰和白色,营造学术且严谨的氛围。 3. 内容策略: 字数扩充:基于原始素材进行了深度的学术化拓展,补充了从“前科学时期”到“认知革命”再到“应用心理学”的演变逻辑,确保总字数远超3000字。 核心词加粗:所有涉及“社会心理学的发展历史”及相关核心概念的词汇均已加粗。 板块划分:包含“早期探索”、“实验室革命”、“量化时代”、“应用拓展”、“网民关注周边”等板块。 4. 技术实现: 纯CSS选项卡:使用 `radio input` 和 `:checked` 伪类实现无JS的选项卡切换功能,确保静态页面也能交互。 时间轴:使用CSS绘制垂直时间轴,展示学科发展节点。 响应式:适配手机、平板和桌面端。 SEO:包含完整的Meta标签,H1唯一,H2-H6层级分明,语义化标签 (`
`, `
`, `
`, `