昨晚上才想起来web前端作业后天要交，赶紧打开电脑开干。说实话平时上课光顾着摸鱼了，真动手才发现连按钮该往哪放都得琢磨半天。

第一步 先整个框架

摸出老师发的作业要求瞄了眼，说要搞个电商商品页。先打开编辑器糊了个div盒子大军：头顶导航条、中间商品图、底下详情描述三块大排骨。结果刚写完外层div，里面小div就跟下饺子似的噼里啪往下掉，左边飘一个右边挂一个。

• 折腾半小时才搞明白
• 原来外层没设宽度
• 里层div直接用百分比布局
• 跟没头苍蝇似的乱窜

第二步 上核心功能

最头疼的是轮播图需求。网上扒了段代码贴进去，图片倒是会动了，底下小圆点死活不亮。对着教程检查三遍才发现，复制的时候漏了个class名。改完刷新页面，圆点突然像通电的灯泡啪地亮起来，当时差点把泡面打翻。

商品详情那块更闹心，点“加入购物车”按钮得弹出提示框。写好click事件一测试，按钮比石头还钝。后来抓着头皮查代码，发现把Button拼成Buton，字母t不知道被吞哪去了。补上字母那秒，弹出框蹦出来的时候，真比泡面第一口还香。

美化修罗场

做到这儿页面还跟毛坯房似的。挑颜色时犯选择困难症：标题用蓝色还是紫色纠结十分钟，选了种像蓝莓酱的靛青色。结果预览时发现和商品图的红色包装撞得眼冒金星，连夜改成米白色才顺眼。

• 响应式踩坑最惨
• 手机视图里图片压成面条
• 临时抱佛脚加media查询
• 屏幕宽度像素数数错三位
• 调试时差点把键盘抠穿

凌晨两点终于调好一个边距，点保存那会儿手都在抖。回头看代码堆得像违章建筑，但浏览器里跑起来那刻，比宿舍泡面还让人安心。对了，提交前记得把调试用的边框红线删掉——上次作业交了个番茄炒蛋配色被笑了半个月。