最近我琢磨着整个HTML静态页面，因为自个儿弄个小博客页面，想省点事儿。我就用了这个方法，还真挺管用的！今天我原原本本说一遍我的操作过程，就按着从头到尾的实况来分享。
我先想清楚要啥玩意儿
我一开始坐那儿琢磨了半天，这个静态页面到底放啥内容决定做个小博客首页，放点文章标题、简单说明和一张图。我还想想页面要整洁点，别太花哨，省得后面改动麻烦。弄了个小本子随手写几个点：标题、描述文字、配图、小按钮链接啥的。这步做完，心里有个底了，省得后面折腾来折腾去。
然后我草草画个布局图
接着我就在纸上画起草图来，想整得有条理。先是顶端放个大标题，下面分左右两栏：左栏写文章梗概，右栏放个简单图片。再底下搞个小功能区放点按钮啥的。画得贼粗糙，就跟小学生涂鸦似的，但不用太规整，够看出结构就行。我用了点方框加箭头，标哪儿该放文字哪儿该放图片，这法子省了查那些专业工具的时间，直接动手开干。
动手写HTML代码
画好草图后，我开始敲代码了。打开记事本就整HTML文件，从最基础的开始搞：
- 建个新文件，先写上和开头，这玩意儿就跟搭架子一样，简单明了。
- 往里塞内容：用
做大标题，
写段文字说明，
分两栏布局。右边我还加了张图，找个网上现成的图片链接填上去。左边弄个小列表放文章预览。- 加几个链接按钮，搞成标签，点进去能跳到别的地方。整个过程就是复制黏贴旧代码，不用琢磨太多新写法，省力得很！
写代码时遇到啥毛病？比如标签没闭合啥的，我就立马停下检查，改好了再继续。这步花了半小时，比我预想的快多了。
再加点样式让它好看点
光写HTML看着跟白板似的，我就用CSS加点简单样式。新建个*文件，跟HTML链起来，然后：
- 标题搞大点，用加粗，调成蓝色，看着显眼。
- 给左右栏分宽度，左边窄点儿，右边宽点儿，背景色涂成浅灰色，省得视觉乱糟糟。
- 按钮，弄个圆角边框加底色，点上去换颜色，这些小细节都整了。我是靠模仿网上常见样式填的，不用学花里胡哨的，省时又实用！
这步我试了好几次改颜色和大小，结果效果还凑合，关键别追求完美，整点粗糙的反而快多了。
试试效果优化下
弄完了，我就在浏览器里打开文件试试看。用不同设备瞄了瞄：电脑上看版面没歪，手机里缩小点也算行。改了几个小毛病：
- 文字太大缩了个号。
- 图片显示不全调了下尺寸。
- 按钮点着顺手就确认OK了。
整个流程下来，也就一上午搞定，没找啥专业工具，就是本子和记事本加浏览器来回倒腾。省了多少力气？比网上查教程快多了！总结下经验：别想太复杂，动手干了再说，粗糙就粗糙呗，够用就行！
