今天搞了个好玩的东西，手把手教你们怎么用拖拖拽拽做个网页。事情是这样式儿的：上周接了个小活儿，甲方要个产品展示页，我寻思着这玩意儿手写代码不得折腾半天？突然想起之前刷到过那种可视化工具，就琢磨着偷个懒试试水。

第一步：软件装得我头大

找了个免费工具下载，好家伙安装包比我前男友还缠人！光点“下一步”就点了七八回，装完还报错。气得我重启电脑重装了五次，发现是杀毒软件在作妖。关掉防火墙再装，总算看见界面了——满屏花花绿绿的按钮跟儿童乐园似的。

第二步：开始瞎拖乱拽

• 左边零件盒子拽个标题框，直接往中间画布上扔，双击就能改字
• 右边属性栏调字体大小，拉了半天拖把才看清“36px”写的是啥
• 图片框死活传不上去图，原来格式得是jpg，我那png全白准备了

最搞笑是拖按钮组件，本来想要个蓝色渐变，结果手滑拽成荧光绿，丑得跟我家过年买的酸菜一个色儿。

第三步：手机排版翻大车

电脑上看挺板正，点开手机预览直接裂开——标题跑屏幕外边去了，图片叠成俄罗斯方块。原来忘了开“自动变形”功能（后来才明白这叫响应式布局）。挨个组件点自适应，折腾到半夜两点才让按钮老老实实呆在屏幕中间。

导出差点气笑

点生成代码按钮，duang地弹出三斤重的文件夹！打开html文件一看，好家伙自动生成的div跟套娃似的，注释比代码还多。甲方要加个简单特效，我硬是在垃圾山里刨了半小时才找着地方插代码。

完事儿把文件压缩包甩过去，甲方秒回：“效果挺精致”。我心里暗骂：可不精致吗？这工具生成的多余代码都够炒盘菜了！

吃一堑

• 赶时间交差可以玩拖拽，但导出记得删掉多余代码
• 做手机页面先把自适应开关焊死在启用位置
• 千万别让甲方知道你是靠拖拽完成的，显得咱不值钱

现在看着那堆自动生成的嵌套div还头疼，工具节省的时间全花在后期改造上了。下次再有人找我做简单页面，我可能直接淘宝二十块外包——反正拖拽工具傻瓜得连我家狗都能操作。