最近想提升网页设计水平，朋友开个小店要搞网上卖货，我就自告奋勇帮忙做电商网站。起初挺兴奋，觉着弄个漂亮页面有啥难的，结果一上手才发现不简单。
开始前的准备工作
我先搞明白电商网站要网上查了一圈，发现大伙都用工具画草图，我就选了免费的那个画图软件。记得那天我坐电脑前，花了两个小时捣鼓，工具上手慢，界面看着眼花缭乱。然后我列了个清单：
- 首页要放产品图和搜索框
- 产品列表页得分类，比如衣服、鞋子啥的
- 详情页得整上图片和购买按钮
- 购物车不能少，还得计算总价
我还拉朋友聊了下颜色偏他非要红色当主色，说喜庆卖得我心里嘀咕：“这红色多了容易扎眼”，但朋友开心就行。
动手设计草图
画草图时我开干了，先在纸上瞎涂了个首页：顶部搞导航条，中间堆一堆产品图。接着打开软件拖拽组件，第一版弄得太挤，产品图大小不齐，朋友看了直摇头说“像个菜市场地摊”。我火了，重新来过：
- 分区块排，首页留白多点儿，显得干净
- 产品列表页做成网格状，每行四个产品
拖来拖去，花了三天时间。中间软件还卡死几次，气得我想砸鼠标，后来发现是内存太小，重启电脑才解决。
代码实现阶段
草图搞定，我就写代码了。打开编辑器写HTML结构，先整首页的骨架：头部弄导航条链接，底部加版权字儿。接着搞CSS样式，调颜色、字体大小、边距。朋友非要红色背景，加完一瞧，整个页面红彤彤像过年贴春联。我试着减淡色度，再加白色块衬着，总算顺眼多了。
写到产品详情页时出问题了，购买按钮点了没反应。我查代码发现事件绑定错了，重新写JavaScript函数处理点击动作：
- 点按钮弹出“加入购物车”提示
- 购物车自动更新数量和总价
调试又卡在价格计算上，有回加产品总价少了十块钱，发现是函数漏了运费项。急得我熬夜修，喝了三杯咖啡。
测试和收尾
网站差不多成型，我让朋友测试在手机和电脑上打开。手机看时布局乱套了，首页文字叠图片上。我赶紧用响应式设计调整：
- 加媒体查询，小屏幕时自动缩图
- 字体大小也调大，省得看不清
问题一堆，但磨叽一周总算搞定了。朋友试了购物流程，顺顺当当，还夸说“比淘宝还流畅”。我心里乐，虽然过程磕磕绊绊，从头到尾学了不少：别高估自己，实操比想得费劲。
搞笑的是，一晚调试，我家猫跳键盘上，代码删了一半。气得我把猫抱一边，重启重写那段。现在网站上线了，每次见朋友卖货，我就想到那猫捣乱的事儿，乐得呵呵笑。
