今天捣鼓了一天ps网站模板，这东西看着简单真动手才发现全是细节。最开始我寻思找个现成的改改就行，结果打开素材网站直接看花眼。

从找模板到放弃

我先翻了七八个热门模板，不是布局太老气就是功能缺胳膊少腿。有个看着不错的下载完一解压，发现导航栏代码竟然用着五年前的写法，手机上一打开直接错位。连着试了三个都这德行，干脆心一横自己从头撸。

动手搭框架

先拿ps画了个大概布局，想着要突出作品展示区就留了百分之六十版面。结果切图时候发现根本没法兼顾不同屏幕尺寸——电脑上看挺大气的一到平板就挤成一团。返工三次才琢磨出用百分比替代固定像素，光这个调试就耗掉俩钟头。

• 头图区域改了五版才不显突兀
• 作品缩略图尺寸换了三种比例
• 导航栏下拉效果调试了十几次

最头疼的交互部分

做到鼠标悬停放大效果时彻底卡壳。刚开始直接套用网上的放大镜插件，结果加载速度慢得能泡杯茶。后来改用手写CSS3变换，又遇上低版本浏览器直接崩盘。折中方案是预加载小图，点击才触发高清大图，虽然土但至少保证都能用。

等终于把主要功能都跑通，回头检查发现忘了做移动端菜单折叠。只能临时加了个汉堡按钮，测试时手滑点太快还导致动画闪屏。现在回想起来，这种细节问题比实现主要功能还费神。

导出前用不同设备试了遍，发现平板横屏时排版还是会乱。但眼看天都黑了，索性先保留这个瑕疵——反正用平板还横着看网站的人也不多。今天这通折腾让我明白，看着简单的模板处处是坑，下次再改版肯定得先做移动端适配。