今天想聊聊我自己折腾网站模板的事儿，说实话一开始根本没想到能搞成，就是觉得网上那些模板要么太贵，要么用着别扭，干脆自己动手试试。

先从最简单的想法开始

我琢磨着，网站模板不就是个页面框架嘛头尾固定，中间内容能变就行。于是打开编辑器，新建了个html文件，先写了个最基础的骨架，就是那种带head和body的空壳子。

接着我就开始画布局，用div一块块拼。顶部导航栏直接用了ul列表，左边放logo，右边塞几个链接；中间主体部分分成两栏，左边窄点放侧边栏，右边宽的是内容区；底部就更简单了，版权信息加条横线完事。

• 导航栏折腾最久，因为想让它响应式——屏幕小了能自动变汉堡菜单
• 侧边栏的折叠效果试了三种CSS写法才不卡顿
• 字体大小调了七八次，总怕手机上看太小

配色差点把我逼疯

本来觉得选颜色最简单，结果调色板开了半天，浅了像没睡醒，深了又像中毒。干脆偷懒，直接用灰白当主色，按钮用蓝色点缀。还特意加了暗色模式，晚上写代码时眼睛舒服点。

最搞笑的是测试时候发现，在同事的老旧笔记本上颜色全花了，原来忘了设fallback色值。赶紧补上保守的十六进制码，这才算踏实。

动态效果全靠硬试

我想让页面有点活气儿，比如鼠标悬停时按钮要浮起来。开始用box-shadow做立体感，结果阴影太重像按钮飘走了。后来改成了微微变色加边框高亮，看着自然多了。

滚动效果更折腾，本来想学那些高级网站搞视差滚动，结果代码粘过来完全不动弹。查了半天发现是jQuery版本冲突，气得我直接手写原生JS，虽然就十几行，但好歹能用了。

居然真跑起来了

当我用手机打开测试链接，看到导航栏乖乖变成三横线，内容区自动适应屏幕时，差点在咖啡馆喊出来。虽然就是个基础模板，但每个像素都是自己敲出来的，感觉特别实在。

现在这模板已经扔在服务器上跑半个月了，偶尔改改边距调调颜色。下次想试试加个瀑布流布局，不过得先歇两天——调CSS调得我做梦都在找闭合括号。