今天早上一睁眼，就接到老同学电话，说他开了个小店想整个简单的宣传页放朋友圈。我一拍大腿，这事不正好验证我刚研究过的H5设计流程嘛上回折腾半天搞懂的那几个步骤，现学现卖的机会来了。

第一步：抄作业找灵感

先掏出手机翻各种卖货的、搞活动的H5页面。见到布局顺眼的就咔咔截图，看到弹窗特效丝滑的录屏保存。翻着翻着发现个好玩的——人家点个按钮跳出来的优惠券居然会转圈！专门建了个文件夹就叫“偷师素材库”，塞进去二十多张截图。相中个奶茶店页面，左边产品图右边文字说明，底下还带个胖乎乎的立即购买按钮，看着就让人想戳。

第二步：画个草稿定框架

从厨房扯了半张油烟机说明书，蹲在茶几上开画。先画个大方块当屏幕，顶上撇两条横杠算标题栏。中间咔嚓分成两大块：左边画个相机图标代表商品图，右边画几根波浪线假装是文字描述。最底下画个圆角矩形当按钮，旁边特意标注“要能抖三抖”。画完拍照发给同学，结果他回消息说按钮能不能做成草莓色，得，橡皮擦蹭掉重画个粉色方块。

第三步：搬砖式拼页面

打开编辑器就开始复制黏贴大法。先整了个最朴素的骨架：

• 最外层用
  当筐
• 标题栏直接复制昨天练习题的导航代码
• 中间区域拆成两半，左边塞标签右边放
• 按钮找了个现成的圆角CSS样式改了三遍颜色才调出草莓粉

特别往按钮代码里加了transform:rotate(5deg)，鼠标放上去就会歪头——就是抄来的那个转圈特效魔改版！

第四步：让手机电脑都能看

在平板上预览发现右边文字挤成二维码了。赶紧搬出终极武器：往所有