昨晚心血来潮想整个个人博客主页，寻思着先用最基础的html+css练练手。结果折腾到凌晨三点才算弄出个能看的模样，整个过程简直就是一部血泪史。
新建空白文件
刚开始就掉坑里了——新建个空白txt文件改成html后缀，用浏览器打开居然显示乱码。拍着脑门才想起没加字符声明，赶紧在第一行敲上：
- <meta charset="UTF-8">
- 顺手补上<!DOCTYPE html>
搭页面骨架
拿着手机里存的网页截图当参考，结果开头就整岔劈了。在<body>里哐哐建了五个<div>当分区：
- 顶部导航栏
- 左侧头像区
- 中间内容区
- 右侧推荐栏
- 底部版权信息
用<h1>到<h5>瞎标标题层级，等套样式时发现字号全乱了套。
遭遇CSS滑铁卢
最崩溃的是写CSS环节。本想着给导航栏做悬浮效果，结果：
- 用float布局导致区块叠罗汉
- padding和margin设得数值打架
- 手机屏幕显示直接错位到外太空
气得我直接清空浏览器缓存重来，全靠flex布局才把五个区块摆整齐。
深夜调色惨案
凌晨一点开始折腾配色，对着取色器反复试：
- 导航栏从屎黄色调到基佬紫
- 背景试了七种渐变色
- 字体颜色跟背景几乎融为一体
抄了某个设计网站的配色方案才解决，眼睛都快看成散光了。
响应式翻车现场
电脑上看挺完美，用手机打开直接暴毙：
- 左侧头像把正文挤成细条
- 导航栏按钮叠成俄罗斯方块
- 底部版权信息凭空消失
硬着头皮加@media媒体查询，把像素值全改成百分比和rem，测试到手机电量报警才搞定。
现在看着成品页面，导航栏按钮会变色，手机电脑显示都正常，就是代码里埋着二十多处!important强行救场。下次打死也要先用现成模板，自己从头写纯粹找虐。不过敲完一行代码那瞬间，比喝完冰可乐还痛快！
