# 你是一个资深的前端开发工程师请帮我做一个网页 --- 你好，请帮我做一个网页。我完全不懂技术，所以你按我说的做。 要求：不用任何插件、框架、网络素材，也不要图片。图标请你自己用代码画出来（简单的线条小图标就行），不要让我去找图片。 --- ## 一、这个网页是干什么的 是我自己的一个学习笔记站，很像 GitHub 那种网站的样子：**左边是目录，右边是内容**。 左边一共有三个大主题，从上到下依次是： 1. 前言 2. 学习 3. 实战 每个大主题下面还可以有若干个小主题。 --- ## 二、整体长什么样，我用大白话描述一遍 打开网页的时候，你会看到： - 屏幕**最左边**贴着一个瘦瘦的小白条，上面竖着写两个字：**目录**，旁边有个小箭头。 - 这个小白条要一直固定在屏幕最左边，我往下滚页面它也还在那儿，不能滚走。 - 网页**一开始左边的大目录是收起来的**（收着的意思就是：完全看不见、也不占地方），屏幕上只有那个「目录」小标签和右边的正文。 - 整个页面所有东西都要**靠屏幕左边排**，不要在左右两边留一大块空白搞什么"居中"，那样看着特别空旷。 鼠标点一下那个「目录」小标签： - 左边会滑出来一个白色的方框，里面就是完整目录（0.2 秒左右慢慢滑出来，不要"啪"一下突然出现）。 - 再点一下，这个白框又缩回去，恢复成只剩一个小标签的样子。 - 小标签上的箭头要能翻转方向：收起来的时候箭头朝右（意思是"点我可以拉出来"），展开的时候箭头朝左。 --- ## 三、左边目录里面要有什么 从上到下依次是： **1. 最上面一个搜索框** - 里面淡淡的灰字提示：`搜索主题`。 - 我在里面打字，下面的主题就只留名字里带这几个字的，没有命中的那一整组直接隐藏。 **2. 三个大主题，竖着排下来** 每个大主题长这样，一行： - 最前面一小根竖着的彩色小色条，用来区分是哪个大主题： - 前言 = 紫色 - 学习 = 绿色 - 实战 = 黄色 - 中间是大主题的名字，字小一点、灰色 - 右边一个小圆角标签，里面写着这个组里有几个小主题（现在都是 `1`） 名字后面往下一点、往里缩一格，放它自己的小主题，左边有一条细细的浅灰竖线，一眼能看出是从属关系（就像文件夹里的子文件）： - **前言** 下面：`前言` - **学习** 下面：`ollama` - **实战** 下面：`runaway` **3. 小主题被选中时的样子** - 整行变成浅灰底、字加粗，前面的小圆点变成蓝色，表示"当前正在看这一篇"。 其他的交互： - 鼠标划过任何一行，那一行变浅灰底，表示可以点。 - 点大主题的名字，就跳到它下面第一个小主题。 --- ## 四、右边内容区要有什么 每次点左边一个小主题，右边就换成对应的内容。右边的内容统一长得像一张卡片： **先说卡片的样子** - 一个白色的方框，有一圈很淡很细的灰边框，四个角是圆角。 - 卡片顶上有一条浅灰色的横条（卡片脑袋），左边写几个灰色的字，右边可以有一个小小的圆角标签。 - 卡片身体部分就是白底，里面放正文，四周留出舒服的空白。 **1. 点「前言」时，右边显示** - 顶上灰色小字：`chichichi.icu / 前言`（这就是位置提示，像面包屑一样，中间用 `/` 隔开） - 下面大字标题：`前言` - 卡片脑袋左边写：`README`，前面加一个小书本图标；右边一个小圆角标签写：`AI 生成` - 卡片里面只有一句话，原样照抄，一个字都别改： > 该网址前端内容只用ai完成，需要提示词可以自己看 注意：**`提示词` 这三个字要单独做成蓝色的超链接**（蓝色的，鼠标移上去有下划线），点它会打开同目录下的文件 `chichichi.icuFrontendPrompt.md`。 **2. 点「ollama」时，右边显示** - 顶上灰色小字：`学习 / ollama` - 大字标题：`ollama` - 卡片脑袋左边写：`学习笔记` - 卡片里面暂时没内容，放一个浅灰底的虚线方框，中间写一句灰字：`内容待补充` **3. 点「runaway」时，右边显示** - 顶上灰色小字：`实战 / runaway` - 大字标题：`runaway` - 卡片脑袋左边写：`仓库地址` - 卡片里面： - 先放一个白底细边框的横条，左边是这个网址：`https://github.com/liushichi/runaway.git`，右边一个小按钮写 `复制`，点一下就复制这段地址，同时按钮文字变成 `已复制`，1.5 秒后自己变回 `复制`。 --- ## 五、颜色和长相（我描述成这样，你帮我配） 整体就是**白底 + 很浅的灰底 + 很淡的灰线**，干净、克制、不要花哨： - 整页背景：很浅的灰（`#f6f8fa`） - 卡片和左栏：白色（`#ffffff`） - 选中的那一行：比页面灰稍微深一点点（`#eef2f5`） - 边框线：淡灰（`#d1d9e0`），细分隔线更淡（`#d8dee4`） - 正文字：接近黑（`#1f2328`） - 次要文字、说明文字：灰（`#59636e`） - 链接和选中的蓝点：蓝色（`#0969da`） - 三个大主题的小色条：紫色 `#8250df`、绿色 `#1a7f37`、黄色 `#bf8700` 其他要求： - 字体就用电脑系统自带的，不要从网上加载字体。 - 所有圆角统一小小的（大概 6 像素），不要大圆角。 - 字号：正文 15 左右，标题 24 左右，小标签 12 左右，别太大也别太小。 - 图标线条细一点、简单一点，颜色跟着旁边的文字走。 - 不要用表情符号当装饰。 - 鼠标移到按钮上，底色要有轻轻的变深，让人知道能点。 --- ## 六、手机上看的时候 屏幕窄了（比如手机），就变成上下结构： - 目录放在上面，内容放在下面。 - 我在手机屏幕上点了某个小主题之后，目录**自动收起来**，免得挡住正文。 - 不管多窄，都不能出现左右滑动的横向滚动条。 --- ## 七、几个我吃过亏的地方，请特别注意 1. **左边目录收起来的时候，不能占位置**，否则下面会莫名空出一大块地方。收起来就应该是"完全消失、不占地方"。 2. **整个版面靠屏幕左边排，不要居中**，不要加什么深色顶栏、不要顶部再来一排标签按钮。 3. 左边目录展开滑出来的时候，里面的文字**不要中途挤成一团再展开**，要顺顺地整个滑出来。 4. 不要改我给的文字、网址和文件名，一个字都不要改。 --- ## 八、做完之后，你自己检查一遍这几条 - [ ] 打开页面时，左边只有一个竖写的「目录」小标签，目录是收着的，右边内容不会因为它而偏移 - [ ] 点「目录」能滑出来，再点能收回去，箭头方向会变 - [ ] 目录里「前言 / 学习 / 实战」是从上到下竖着排的，每个的小主题往里缩进、前面有彩色小色条 - [ ] 点小主题，右边内容会跟着换，被点的那一行会高亮 - [ ] 前言那张卡片里的「提示词」是蓝色的、能点，能打开 `chichichi.icuFrontendPrompt.md` - [ ] 整个页面贴着屏幕左边，没有图片、没有表情符号、没有报错 - [ ] 网页在手机上打开也不乱，不会左右滑动 --- ## 九、以后我想自己加内容，怎么加 不用你额外做功能，但你做的时候请做到**结构清楚、方便我照着加**： - **想加一个小主题**：我只要照着已有的样子再复制一份，改个名字和编号就行。 - **想加一个大主题**：也是照着复制一份，换个颜色就行。 所以请把三个主题写成同样的格式，别每个都写一套不一样的写法，方便我这个小白照着抄。 # 以下是示范操作的记录： ![22aac3ba-6ba2-410c-9f83-0b0fdb2b958a](/Users/chichichi/Desktop/chichichi.icu/22aac3ba-6ba2-410c-9f83-0b0fdb2b958a.png) 生成效果（会存在差异，核心原因是大模型本身是概率生成，不是确定性计算，随机性来自模型内部） ![734600e1-3c7c-4a7e-a3af-353244793f39](/Users/chichichi/Desktop/chichichi.icu/734600e1-3c7c-4a7e-a3af-353244793f39.png)