三国经典网

今天给大伙儿唠唠我折腾小绿山官网这事儿。刚开始就觉着，不就是个网站嘛帮朋友个小忙呗，谁想到后面能费这么大劲儿。

平地起高楼

朋友甩过来个文件夹，说里面全是小绿山的照片和介绍文案，想整个简单网站挂上去。我想着静态页就行呗，唰唰唰用最土的法子，手写HTML+CSS开始搭架子。

• 挖地基：先在脑子里划拉几个框框——导航栏、大标题图、内容区、联系方式，噼里啪敲出个丑兮兮的框架。
• 糊墙面：把朋友给的文字塞进
  里，照片一张张往标签里怼。光给照片排排队就耗了一下午，不是挤变形就是掉对齐。
• 刷油漆：琢磨着加点颜色，找了个看着像山的青绿色当主色调，调来调去总觉得像公园指示牌。

栽坑里打滚

搞到一半朋友发消息：“哥，用手机看咋挤成一团了？” 完犊子！

• 手机当头棒：赶紧掏出自己手机看，导航栏的字叠罗汉！这才想起“响应式”这茬儿，赶紧查怎么让盒子老实点。
• 图片扯后腿：朋友给的图全是手机原图，大的十几兆！传上网龟速加载。吭哧吭哧开了个PS缩尺寸，老照片还给修了修边角。
• 联系方式藏猫猫：朋友说地图要能直接点开导航，电话要能直接拨。研究半天给电话加了个“tel:”，地图嵌了个坐标，折腾到后半夜才把电话号码变蓝。

抠细节抠破头

架子搭好开始扣扣索索搞细节。

• 导航亮瞎眼：点哪个栏目，哪栏就变个色提醒人，写JS事件的时候手滑，点一下整个导航栏都变色了，来回改了七八遍。
• 加载小动画：图多加载慢，琢磨加个加载中的小圈圈转转。网上一搜，抄了段CSS动画代码贴上去，乍一看像个小风车。
• 点按有回响：按钮按下去得有点“摁下去”的感觉？给按钮加了个点击时往下沉一点点的小效果，调阴影值调到眼花。

缝缝补补能见人

把做好的东西扔浏览器测试。

• 浏览器打架：Chrome上挺漂亮，换到Safari一看字都飞出屏幕了！气到灌了两杯咖啡才调明白是Flex盒子撑大了。
• 朋友试货：打包扔给朋友试用，隔一会儿蹦出条消息：“哥，那个介绍第二段好像有个错别字...” 行，抄起键盘改呗。

总算能用了。朋友连发一排大拇指，我瞅着这简陋的小网页，累是真累，但堆完看着它老老实实待在那儿，文字没歪图没炸，手机电脑都能看，心里那点小得意劲儿，跟当年搭完积木似的。不过下次谁再让我“随便搞搞”网页，我铁定先问问能不能花钱找人搞！