话说回来，我为啥非要弄个这么怪的玩意儿？是上个月我跟部门老大闹了个大别扭。
我们那个项目，我花了两周时间把前端的组件都标准化了，用的都是最新的方案。结果老大非要说，你这不行，看起来不够“稳重”，缺乏“历史沉淀感”，硬是让我倒回去用一套三年前的老旧CSS库。我当时就想掀桌子。
我当时跟他争了半天，我说时代变了，你这是历史的倒车。他来了一句更绝的，他说：“你这个年纪了，还是太年轻，不知道市场的险恶。”险恶个屁！ 我那天回来对着电脑屏幕发呆，越想越气。
所以我就决定，我要搞一个绝对没有“历史沉淀感”，绝对“不稳重”的东西。不是你说的“企业级审美”吗？那我就做个“魔法级审丑”给你看看。这教会官网，就是我发泄不满的一种方式，纯粹是跟自己较劲，跟那些条条框框对着干。
起步：设计与材料的野蛮拼凑
定下了《魔法少女の教会游戏官网》这个目标，听起来就一股中二病晚期没救了的味道，爽！
起步当然是材料。我懒得自己画，直接跑去那些免费图库扒了一堆哥特式的教堂背景图。但光有教堂不行，还得有魔法少女。我就找了几张粉色系、闪闪发光的角色图，往深沉的背景上狠狠一贴，这对比度，绝了。我就喜欢这种不正经的混搭。
小编温馨提醒：本站只提供游戏介绍，下载游戏请前往89游戏主站，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
- 找了三张主色调是黑白的老教堂图片，做底色。
- 硬塞了四张粉红色闪亮亮的魔法少女剪影，做主视觉。
- 字体选了个看起来像拉丁文的英文字体，假装看不懂很高级。
- 服务器？没啥说的，直接用了之前买的那个吃灰小鸡，配置低得可怜，跑个静态页倒是够了。
过程：硬着头皮的纯代码死磕
我这回硬着头皮没用任何框架或者预编译，就是纯的HTML、CSS和一点点JavaScript。为我就是想感受一下那种直接硬撸的感觉，像回到了刚入行那会儿，每个像素都得自己一点点抠出来。
最折磨我的就是那个圣器展示区，我想做个那种光标移上去会有一圈圣光特效的浮动卡片。结果那个CSS的父子选择器跟定位死活对不上，一刷新就错位，看得人脑壳疼。这破玩意儿比公司那些“企业级”的组件还磨人。
我从晚上八点死磕到凌晨两点，一杯咖啡干光，烟灰缸满了。我试了各种Flex，各种Grid，发现是我的定位属性嵌套出问题了。我一怒之下，直接用了一个奇葩的负margin把它给强行怼正了。反正能跑，管它优雅不优雅，能实现功能就是胜利。
实现：魔法级审丑的最终形态
最终效果是，网站主色调是深沉的黑与灰，象征着古老的教会。但所有按钮、所有链接、所有魔法少女的部分，都是刺眼的荧光粉色。看起来就像一个黑色的棺材上铺满了粉色的糖霜，非常诡异，非常成功。
我把“入教申请”那块做成了一个弹窗，点下去会用那种很严肃的哥特字体弹出一句“恭喜你，成为了光之美少女”。虽然很傻，但这不就是我想要的吗？我看着那个黑底粉字的官网，感觉比公司那套什么百万PV的电商网站成就感大多了。
这玩意儿的诞生，就是为了证明，代码是自己的，想怎么折腾就怎么折腾。整个过程就是：想、找、怼、成。简单粗暴，但真解压。