最近，真是闲得有点发慌，总想着捣鼓点啥新玩意儿。之前脑子里一直盘旋着一个想法，就是给我的一个小故事或者说是一个小设定，做一个像模像样的“官方网站”。就有了今天这个实践记录，关于《我的失忆症女友官方网站》的搭建过程。
起心动念，瞎琢磨阶段
就是觉得这个名字挺有意思的，“我的失忆症女友”，听起来就像个轻小说或者独立游戏的名字。我就琢磨着，如果真有这么个作品，它的官网会是啥样的？肯定得有点神秘感，又得有点温馨，还得有点故事线索在里面。第一步，我就是在纸上瞎画，大概构思了一下网站的几个主要板块：首页、故事背景、主要人物介绍、可能还会有的“开发日志”或者“作者手记”啥的。
准备动手，工具和素材的选择
喜欢简单直接，不想搞太复杂的技术。所以工具选择上，我寻思着就用最基础的HTML、CSS和一点点JavaScript得了。图片素材嘛暂时先用一些免费的或者自己随便画点概念图，毕竟这只是个实践记录，重点是过程。
我还特地找了个安静的下午，泡了杯茶，把之前零零散散记录在备忘录里的关于这个“失忆症女友”的片段设定都翻了出来。比如女主角叫有啥特点，故事大概是个什么走向，男主角（可能就是“我”的视角）的心路历程等等。这些都将是网站内容的骨架。
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
开干！敲下第一行代码
第一步：搭建基础框架。
我先建了个文件夹，然后创建了 `*`, `*` 和一个 `*` 文件。这老三样，可以说是网页的标配了。在 `*` 里，我先写了个最简单的头部、导航栏和页脚的结构。导航栏里就放了“首页”、“故事”、“人物”、“手记”这几个链接，虽然点进去暂时都是空的。
第二步：首页的设计与实现。
首页嘛我希望它能一下子抓住人的眼球。我想象中是放一张有点朦胧感的背景图，然后配上一句引导性的 Slogan，比如“遗忘，是为了再次相遇？”之类的。然后用CSS调整了一下字体、颜色和布局。这块儿花了不少时间，主要是调样式，让它看起来舒服点。中间还遇到个小问题，图片怎么都不能全屏，后来查了查，用了 `background-size: cover;` 才搞定，真是学无止境。
第三步：填充其他页面。
接下来就是给“故事背景”和“主要人物介绍”这两个页面填充内容了。我把我之前琢磨的那些设定文字，一段一段地复制粘贴进去，然后用HTML的标签简单排了下版，比如用了 `
` 做小标题，用了 `
` 来分段。人物介绍页面，我还设想了以后能放上人物的立绘图，所以预留了图片的位置。
- 故事背景：简单写了写这个世界观，以及“失忆症”这个核心设定的由来和表现。
- 人物介绍：目前就放了女主角和男主角（旁白视角）的一些基本信息和性格特征。
第四步：简单的交互效果。
我想着既然用了 JavaScript，总得让它发挥点作用。于是我在导航栏上加了个小效果，就是鼠标滑过的时候，链接会变个颜色或者加个下划线啥的，让网站不那么死板。这个用CSS的 `:hover` 伪类也能实现，但我还是想练练手JS，就用JS操作DOM元素样式改的，虽然有点杀鸡用牛刀的感觉，哈哈。
反思与后续
捣鼓了几天，这个所谓的“官方网站”算是有了个非常非常初级的雏形。代码写得不咋地，设计也挺简陋的，但整个过程下来，还是挺有成就感的。从一个模糊的想法，到动手去规划，再到一点点把代码敲出来，看到页面在浏览器里显示出来，那种感觉挺奇妙的。
这回实践，主要还是为了练手，把一些基础知识串联起来用一下。比如HTML的结构怎么组织更合理，CSS的选择器怎么用更精准，简单的JS交互怎么写。过程中也确实踩了不少坑，比如路径写错导致图片出不来，CSS样式冲突导致效果不对等等，但一个个解决掉之后，经验值也蹭蹭往上涨。
后续嘛如果还有精力，可能会继续完善一下。比如把“手记”页面也做出来，或者尝试加一些更复杂的交互，甚至考虑用个静态网站生成器来管理，让它更像那么回事儿。不过目前这样，作为一个实践记录，我觉得也差不多了。重要的是这个从0到1的过程，挺好玩的。
