# 青岛 · 20 种风格城市介绍网站设计清单

> 硬性要求：20 个站点各自独立的设计 DNA（配色/字体/版式/材质/动效/交互签名），**严禁换皮**。每个站点 6 个页面（index / gaoxiao / jingdian / meishi / lishi / jiaotong），内容必须引用 `00-内容简报.md`，高校页尤其要全面准确。

## 通用技术约束（每站必须满足）

1. 站点目录：`e:\claude\qingdao-sites\NN-风格名\`，内含 **6 个独立 HTML 文件**，文件名固定：`index.html` `gaoxiao.html` `jingdian.html` `meishi.html` `lishi.html` `jiaotong.html`。
2. 每个页面自包含（CSS 内联 `<style>`，可少量内联 JS），**不依赖外部 CDN/网络字体/图片**（图片用内联 SVG 插图实现，保证离线可开、稳定渲染）。
3. 6 页共享同一套站内设计语言（同一配色/字体/导航样式），页与页之间通过相对链接互链（`<a href="gaoxiao.html">` 等）。顶部导航 = 6 页链接；当前页高亮。
4. 每页正文含 **2–4 幅内联 SVG 插图**（对应本页主题：栈桥/五四广场/帆船/崂山/啤酒/海鲜/校园/地铁/老城建筑等，按本站画风绘制，放在内容区）。
5. 每页底部「相关链接」栏 **8–15 个链接**：站内其他页 + 外部官方/百科链接（从 `00-内容简报.md` 第十节与高校档案中取材）。
6. 高校页 `gaoxiao.html` 必须完整呈现简报第九节：公办本科8所 / 民办本科6所 / 公办专科6所 / 民办专科1所 / 驻青校区（山大青岛校区），每校给出类型标签、校区、特色、简介、官网/百科链接。
7. `lang="zh-CN"`、title「青岛 · 风格名 · XX页」、viewport meta、响应式。
8. 页面开头 HTML 注释标注：风格名 + 本页主题 + 制作信息。
9. 页脚联系方式用占位邮箱 `qingdao@example.com`（可替换）。

## 20 种风格（目录名）

| # | 目录 | 设计 DNA | 独有签名 | 配色锚点 |
|---|------|----------|----------|----------|
| 01 | `01-极简呼吸` | 米白纸底、墨黑细字、一点海蓝；超大字距留白 | 首屏一行「青岛」+ 细海蓝线呼吸动画 | #f7f5f0/#111/#2f7fb8 |
| 02 | `02-新拟态` | 柔和米灰 #e0e5ec、凸起/凹陷软卡片、胶囊按钮 | 卡片点击凸→凹塌陷手感 | #e0e5ec/#6b7bd4 |
| 03 | `03-赛博朋克` | 近黑蓝底、霓虹品红+青、扫描线、Glitch | 标题周期性 Glitch 故障 | #0a0e1a/#ff00e5/#00fff7 |
| 04 | `04-复古报刊` | 米黄纸、铅字大报头「青岛日报」、分栏、双线 | 头版版式+「号外」角标 | #f5ecd9/#9a1f14 |
| 05 | `05-水墨丹青` | 宣纸底、墨分五色、竖排、朱印、远山海雾 | 山/海墨晕随鼠标扩散 | #f4efdf/#b03a2e |
| 06 | `06-终端黑客` | 黑底绿字、等宽、命令导航、ASCII 艺术 | 输入 help 命令浏览城市 | #0c0c0c/#33ff66 |
| 07 | `07-玻璃拟态` | 流动海蓝渐变、磨砂玻璃卡片 backdrop-blur | 导航随滚动动态磨砂 | #7c3aed→#3b82f6→#22d3ee |
| 08 | `08-波普艺术` | 三原色高饱和、半调网点、漫画气泡、POW 星爆 | 网点化城市地标头像 | #ff3b30/#ffcc00/#0066ff |
| 09 | `09-合成波` | 深紫夜空渐变、透视地平线网格、栅格落日、CRT 线 | 首屏海滨地平线+霓虹太阳 | #120458→#ff2975→#efb810 |
| 10 | `10-瑞士国际` | 白底黑字瑞士红、Helvetica、编号索引网格 | 编号网格导航（01–06） | #fff/#e30613 |
| 11 | `11-手绘涂鸦` | 奶油纸、蜡笔色、歪扭边框、手写批注、便签 | 悬停抖动卡片+手绘笑脸 | #fdf6e3/#ff9900 |
| 12 | `12-星际科幻` | 深空黑、星云、粒子、轨道环、HUD 面板 | 城市"数据轨道"绕地标公转 | #05070f/#4c1d95 |
| 13 | `13-作业本笔记` | 横线格纸、手写体、红笔批注、便利贴、胶带 | 「城市游记」红批注+可拖便签 | #fbfaf6/#e03131 |
| 14 | `14-代码IDE` | VS Code 深色、文件树、语法高亮、状态栏 | 整站城市数据以"源码文件"呈现 | #1e1e1e/#569cd6 |
| 15 | `15-扁平插画` | 明快扁平色块、圆角、云朵/帆船/啤酒 SVG 插画 | 弹跳入场+插画场景头图 | #7cc6fe/#ffd23f |
| 16 | `16-杂志编辑` | 超大衬线标题、粗/细/斜对比、目录式导航、引语 | 封面式首屏+Contents 目录 | #fff/#c0392b |
| 17 | `17-禅意自然` | 极淡底、竹影山峦、灰绿棕、慢滚动 | 海边竹影摇曳+水纹 | #f6f3ec/#7a9e7e |
| 18 | `18-像素游戏` | NES 配色、8-bit、RPG 对话框、HP/金币 | LIZONG?→「QINGDAO QUEST」开始界面 | #f7d51d/#e53e30 |
| 19 | `19-包豪斯几何` | 白底三原色、圆三角方构成、粗黑线框 | 旋转几何海报+非对称版式 | #e03131/#fcc419/#1c7ed6 |
| 20 | `20-线装古籍` | 宣纸、竖排、朱砂印、文武线框、装订线 | 古籍封面「青岛图志」+印章 | #f3ecd7/#a52a2a |

## 每站 6 页主题速览（按此安排内容与 SVG 插图）

- `index.html` 青岛概览：城市名片、地理气候、行政区划、经济产业、快速导览。SVG：城市海岸线/帆船/红瓦绿树。
- `gaoxiao.html` 高校专题（★）：按简报第九节分 5 类呈现全部 21+1 所院校，每校带类型徽标/校区/特色/官网+百科链接；SVG：校园/书本/毕业帽。
- `jingdian.html` 景点：按市南/市北/崂山/西海岸/其他分区，每区列景点并链接；SVG：栈桥、五四广场"五月的风"、崂山、金沙滩。
- `meishi.html` 美食：啤酒/海鲜/主食/小吃分区；SVG：啤酒杯、蛤蜊、鲅鱼水饺、烧烤。
- `lishi.html` 历史与文化：1891建置/德占/五四/收回/解放、文化节庆；SVG：老城德式建筑、钟楼、啤酒节。
- `jiaotong.html` 交通实用：机场/铁路/地铁/港口/高速/轮渡 + 实用提示；SVG：地铁列车、飞机、轮船、跨海大桥。

> 所有事实以 `00-内容简报.md` 为准，不得虚构院校或数据。数据标注"约"的按原样保留。