今天手把手教大家怎么从零搞个H5网站，我自己也是折腾了俩礼拜才摸着门道。先说好哈，我就是个野路子，照着网上的教程瞎琢磨的，哪里整不对了你们多包涵。
第一步：翻箱倒柜找工具
咱连代码是啥味儿都不知道，得先找趁手的家伙事儿。直接在电脑上搜“免费做网页的软件”，跳出来一堆英文名看得我眼晕。选了个叫啥啥Editor的（名字记不住），反正绿色图标挺显眼，安装包才30多M，下了就能打开，跟记事本差不多界面。
顺手又把浏览器开了五六个，桌面铺满了。回头一看，豁，连素材都没准备！赶紧上免费图库网站扒拉了十来张风景图，全扔桌面新建的“糊弄素材”文件夹里。
第二步：抄起纸笔乱涂鸦
实在憋不出设计灵感，干脆把儿子画画的A4纸抢过来。拿红色水彩笔画了个大方块当顶部，里头歪歪扭扭写“欢迎来玩”；中间画三个圈打算放图片；底下画了条长条准备写联系方式。老婆路过瞅了眼：“你这狗爬字比儿子还不如！”
重点来了：- 最顶上必须放个显眼标题
- 中间堆点花里胡哨的照片
- 最底下得让人能找到我
第三步：对着脸滚键盘
打开编辑器就开始哆嗦，盯着空白的页面发愣十分钟。硬着头皮敲了个< !DOCTYPE html >，百度说这玩意跟开光仪式似的必须得有。接着把纸上的方块翻译成代码：
顶栏用< header >标签包着，标题拿< h1 >糊上去；中间照片区折腾< div >套< img >；联系方式塞进< footer >里。按Ctrl+S保存的时候手都在抖，结果打开浏览器一看——满屏字堆成狗啃的！
第四步：给网页穿花衣裳
实在看不下去这丑样，新建了个叫*的文件。把顶栏背景设成墨绿色，标题调成鹅黄色；照片用CSS让它们排排站；最绝的是联系方式那栏，加了段代码让背景色会渐变，从蓝变紫再变粉。
最费劲的是让网站在手机上也能看，折腾半天加了个：
< p >@media screen and (max-width: 600px) { ... }< /p >
意思就是手机屏幕窄的时候把三张图叠起来放。测试时用手机浏览器划拉半天，结果图片顺序整反了，又返工重改。
第五步：上线吓唬朋友圈
搞了个免费空间把文件传上去，结果首页文件名起成*（大写！）打不开。急得满脑门汗重命名成小写，这回能打开了赶紧发群里。等了半小时没人吱声，偷偷问基友，他说：“你那个‘点击有惊喜’的按钮根本戳不动！” 原来忘记绑JS事件了，赶紧补了段：
*("surpriseBtn").onclick = function() {
alert("上当了哈哈！");
等重新传完文件天都黑了。刷了三次朋友圈终于看见表妹留言：“哥你这网站配色跟村口发廊似的...” 害，能跑起来就不错了！
13988888888
留言 