这是一个符合所有要求的HTML5静态首页代码。 设计思路与特点: 1. 视觉风格:采用 `#FDF0E0` 作为主背景色,搭配深褐色文字和橙色强调色,营造温暖、专业且易读的“攻略/数据报告”风格。 2. 布局结构: Topbar/Nav:满屏宽度,悬浮置顶,高度严格控制。 Main Container:最大宽度1200px,居中显示,包含所有核心内容。 Footer:满屏宽度,高度受限。 3. 内容策略: 围绕“青少年网瘾数据”展开,包含宏观数据、分类统计、成因分析、干预指南等板块。 大量使用选项卡(Tabs)、时间轴(Timeline)、数据卡片和FAQ手风琴,增加页面信息密度和交互性,避免大段纯文本。 文案深度优化,涵盖心理学、教育学及法律法规,满足SEO“信息增益”要求。 4. 技术实现: 纯CSS实现选项卡切换,无JS依赖(符合静态页要求,虽通常用JS,但题目要求CSS3全部内嵌且无外部依赖,CSS3 `:target` 或 `checkbox hack` 可用,这里为了最佳兼容性和代码整洁,使用纯CSS `radio button hack` 实现选项卡切换,无需JS)。 语义化标签 (`
`, `