今天想试试做个科技网站模板，结果折腾了一整天。

开头总是想得太简单

早上打开电脑，觉得做个科技感十足的页面应该不难。先找了个黑色系配色，深蓝配荧光绿，想着肯定很酷。结果调色板拖来拖去，发现暗色背景配上亮字，看久了眼睛特别累。

• 改了三次主色调
• 字体大小调了五六遍
• 导航栏位置换了上下左右四种方案

干脆推翻重来，改用浅灰色打底，重点内容用深蓝色突出。这么一整，突然就顺眼多了。

中间遇到的坑

做到响应式布局这块彻底卡住了。电脑上看挺整齐的，一切到手机屏幕就全乱套。图片把文字挤到旁边，按钮叠在一起点不动。

蹲在椅子上想了半天，突然记起来要用媒体查询。赶紧加上屏幕宽度判断，小屏幕时把布局改成垂直排列。虽然代码写得有点乱，但总算能看了。

本来放了几张高清科技图，结果加载慢得像蜗牛。后来把图片压缩到原来三分之一大小，又加了懒加载。这下页面终于不卡了。

收尾工作最磨人

以为主体做完就轻松了，结果细节调整更费时间。图标对齐调了半个钟头，总感觉差几个像素。表单输入框的边框颜色改了又改，选了最不起眼的灰色。

• footer部分来回改了七次
• hover效果测试了十几种
• 浏览器兼容性检查到想吐

临下班前保存最终版的时候，手抖差点覆盖错文件。吓出一身冷汗，赶紧备份到三个地方。

现在看着成品页面，虽然还有很多不满意的地方，但好歹能看了。下次再做模板，肯定先从手机版开始设计。