今天跟大家唠唠我做网页的实战经历，说实话这事儿一开始挺抓瞎的。老板突然扔给我个任务：“给咱部门搞个介绍页面，下周要用！”我听着都懵，这玩意儿咋整？但活儿来了总不能干瞪眼。
直接开干
我先找了张破纸片，在背面划拉版式：最顶上得放个显眼的大标题，中间堆点文字图片介绍，最底下塞联系方式。随手画了个三层的丑方块，跟积木似的。完事儿立马打开电脑装了个免费编辑器，开个空白页盯着光标闪了十分钟——跟它大眼瞪小眼。
照猫画虎
想起以前看过淘宝的页面，赶紧点开瞅人家咋排版的。发现人家都用表格撑着，我吭哧吭哧敲了堆<table><tr><td>，结果表格线全露在外面，丑得跟九十年代网站似的。同事路过瞅了眼：“你这做古董网页？现在谁还用表格布局！”臊得我赶紧查资料，才发现现在都用<div>盒子加CSS了。
掉坑里了
搞明白盒子模型我立马飘了，整个页面用
堆得跟乐高似的。加了个骚气的蓝色标题，左边挂部门合照，右边塞了段简介文字。美滋滋用Chrome一看挺顺眼，结果用同事手机打开当场傻眼：
- 照片把文字挤到屏幕外头了
- 字号小得要用放大镜看
- 底下的联系电话直接消失
折腾半天才发现没做响应式，捧着CSS手册边查边改。给每个盒子加上max-width:100%，文字尺寸改用rem单位，重要内容全用media query包起来。光调手机显示就耗了三小时咖啡。
勉强交差
好歹能在各种设备上看了，虽然还有几个毛病：
- 点击按钮没反应（忘记写JavaScript）
- 部门Logo被拉伸成胖头鱼
- IE浏览器打开直接乱码（懒得修）
硬着头皮把文件甩给服务器，没想到老板还挺满意：“不错不错，比你上次做的PPT强！”听得我老脸通红——这玩意儿放网上我都嫌丢人。
血泪经验
这趟折腾下来明白几件事：
别闭门造车——我开始要是多参考现成网站，不至于用表格排版闹笑话。
手机优先——现在人全抱着手机看网页，做的时候就得先管手机显示效果。
多测试——那破页面我在自己电脑上看着完美，换个设备就稀碎。
下回再做网页，我肯定先拿手机模板改，再也不想被同事笑话做“电子垃圾”了！
