今天琢磨着搞个网站模板网的源码，纯粹是手痒想练练手。这玩意儿听着简单，真动起手来才发现一堆坑等着我跳。

先从找素材开始

我寻思着得找个现成的模板参考参考，结果翻了半天发现大部分都是要钱的。后来干脆直接打开浏览器开发者工具，把几个常见的模板网站首页结构扒了个遍。盯着代码看了半小时，发现他们用的都是类似的栅格系统，图片和文字排版倒是挺规整。

动手搭架子

先新建了个html文件，把基本的head和body标签敲上去。然后照着扒来的结构画div，光布局就改了三四遍。最头疼的是响应式设计，电脑上看挺整齐的，一切到手机屏幕就全乱套了。后来索性先用媒体查询把手机版的样式硬写出来，虽然办法笨了点，但总算能看了。

明明照着别人的代码写的，结果图片轮播怎么都动不起来。查了半天才发现是jQuery引用路径写错了，少了个斜杠。这种小错误折腾了我整整一下午，发现真相的时候差点把键盘摔了。

完善细节功能

• 给每个模板卡片加了hover效果，鼠标放上去会微微放大
• 分类筛选功能用了最简单的js实现，虽然代码写得啰嗦但能用
• 下载按钮做了个假的弹窗提示，根本连不上后台

搞到晚上十点多终于弄出个雏形，虽然离商业级还差得远，但至少页面能正常滚动了。回头看看代码写得跟蜘蛛网似的，但第一次能做成这样我已经挺知足了。下次再优化的话，得先把代码结构重新整理下，现在这样自己看着都头晕。