都说很多知识是在机缘巧合中学到的，我一直想设计自己的博客，但是技术不全。有一天偶然看到一篇老外写的教程，他说在一个下午搭建起你的第一个Blog，于是故事就发生了……
Day 1
今天逛知乎，有人在讨论做博客，有人说了一个思路：用Jekyll生成网页，然后用Github Page托管、就能搭建一个静态网页的博客。
咦，好像找到个地方可以直接托管网站了（°ο°）~! 试试去…
跟着教程 Creating and Building your Personal Site on Github Page，一步一步的，先拉起一个“能访问的网站”。话说老外写的教程真叫一丝不苟、赏心悦目~
好，现在输入http://wangxiaokuai.github.io，回车 —— Bingo！这就是关键的第一步。
哈哈，这模板太简陋了、、接下来要把我的首页变成这个样子：
？？？
麻蛋，一个小时过去了，我还是不知道下一步搞成什么样子，我要疯了。*
我已经困了。。。*
Day 2
想来想去……最近看到的“简书”很接近我想要的效果啊！简单大气、扁平化。先抄袭一把吧，好的艺术家抄袭创意^_^”
开始画画了哈！做静态网页，就是先布局、然后一块一块的完善。找张合适的图片贴上，字体大小、间距调到舒服为止。嗯…还挺有呼吸感的;)
跟简书像不像？简化了许多哈哈(#_<-)~ 以上就是 第二步，画出首页。
“现在该……模板化了吧！”
“先等一下！刚才只顾着调问题不择手段、弄得代码一塌糊涂、界面也过于朴素。所以，在这之前，不如暂时专注于美观和可读性，把界面和代码优化一下，不急~”
按照 最想做的事儿放最后 原则呢，该先整理CSS代码、让它看上去没有那么的“不可理喻”。。
第三步，整理CSS代码。
1) 规范CSS类的命名：
开发过程中，忘了就回过头来看看（英语单词就这水平了。。。）
2) 把样式表顺序调整调整
虽然css没有模块的概念，对文件的组织缺少约束，那也不能把样式写的到处都是把。按照相关的东西都放到一起的原则呢，总结了四个规矩(→_→) ：
- 只和这个模块相关的样式都放一起，别和别的模块掺和
- 只和这个页面相关的样式就都放一起，和别的页面隔离开
- 几个模块、页面公用的样式，放在文件最开始
- 每一段都用注释明明白白的隔离开
3) 去掉内些没起作用的样式
4) 每个class内的属性按照一致的顺序排一排
暂且按照：位置相关属性 > 盒模型相关属性 > 颜色字体等属性这个顺序。
5) 用简单的写法，代替繁琐的写法。
尤其是内外边距这种，能利用替代方案，就不要用边距去硬加控制。这类属性包括： text-align，line-height啥的，以后再总结咯。
6) 风格统一。
比如吧颜色有好几种表示方法，那我就统一用#fff格式
其实也就是边review代码，边寻找优化点的。反正现在看着顺溜了、找代码容易了~ 再看看页面怎么才能更好看。
第四步，美化一下界面
1） 首先，文本框之类的给一些的内边距。
这样这些标题会更有呼吸感、和错落感。
2）其次，我想页面上多一些“会互动”的东西。
所以，给每行标题都加了个超链接，但也没想好链到哪儿去呢。
3）Powered by Jekyll，感谢这个神奇的引擎。
我要把它链到Jekyll的官网首页。希望这个小动作 也能无意中把强大的Jekyll带给更多人~
4）最后，整体色调太过灰暗了。
有木有？提不起精神儿。来，把照片发到手机上，用美图秀秀调一下颜色、再加几层滤镜哈哈 ——我真不会PS、虽然数字媒体系出身。。
优化后的效果 »
哈哈，话说这背景图，也是十几个版本里最满意的一张了……我是不是也有点儿设计师小情怀啊⊙▂⊙ ;)
两点半了，该睡个午觉回回神了。等会儿见、Sony你也休息吧…*
Ops！发现了一个布局问题、、
之前为了实现右边图片定宽，左边标题可伸缩的两栏布局，给左边设置了-80px的右边距。这样，右侧元素可以覆盖左侧元素80px那么多。正常的时候，好着呢~ 可一旦标题很长或屏幕变窄就会…… o_O???
这显然不对呢，要避免右侧图标覆盖左侧内容！给左侧加个最大宽度试试：
我去！越搞越乱(x___x) 。。。还是回头到网上重学一遍两栏布局吧，先去吃饭了。
——— 这一天她就再也没有回来。。。
Day 3
Another Day~! 回来喽
最终是，借鉴了“双飞翼”布局，给(3)设置-100%的左边距，让(3)可以覆盖在(1)上面；然后在(1)的里面套一层div - (2)，设置右边距为80px，并且把标题塞在(2)里面 —— 这样保证内容不会重叠。Look！多么美妙的排版~O(∩_∩)O~
好就这样、下面要……拆分模板了……