钉子最近各种销声匿迹，许多文章也拖着迟迟没有码完，至于这单儿，已经是两周以前的事儿了。时间久远略微有点记忆模糊，不过为了纪念，还是在此回忆一下国庆那时的一血达成之路吧。
Alipay
@Losses Don 螺丝菊苣找到钉子时，还从未做过 Discuz! 模板更别说商业模板的某人还不太敢接。任务很简单，不需要再从头做设计，按照一个现成的 Typecho 模板风格套用上去即可。口上说着不一定做， 身体还是挺老实的嘛 不过钉子还是马上查起了相关的教程。
「唉 就是个想做站刚入行不知道水多深的家伙 我也就是帮忙忙活一下 ._. 工作量不大 不过很闹心 你做做就知道了= =」
——螺丝菊苣如是说
在那之前钉子只有做过一次 WordPress 的主题，充分享受了其完善的官方文档和开发资源的福利，自然不会料到接下来的艰辛。混乱过时的各种教程，语焉不详的模板文档，首先就来了一个下马威。在无奈放弃了寻找教程之后，某人对着默认模版敲起了代码。还没开始多久，调用LOGO这一关就被间歇性失灵的新老版本两个模版目录调用语句卡住了。钉子终于开始体会到了闹心这个词的含义。
CSS 有两个说不上常用的伪类 :before 和 :after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面，里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外，就是接下来要介绍的这两个伪元素了。
Creative Button Styles
在了解进阶的应用之前，先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时，只需使用伪类使用的单冒号写法，以保证浏览器的兼容性：
在一些很长的表格中，常常会使用表头悬浮的设计以方便阅读，即在表格离开窗口之前，表头会一直 fixed 悬浮在表格的最顶上。还有许多诸如评论框等元素，也采用了这种被称为 Sticky Pin 或者 粘性元素 的设计。
这种效果一直以来需要通过 JavaScript 实现。不过就在去年，这项结合了 Relative （在屏幕中时） 和 Fixed （移出屏幕时） 的样式效果被提案添加到了 CSS3 中。下面是一个示例：
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: sticky;
top: 15px; // 使用和 Fixed 同样的方式设定位置
}
因为这个样式尚未进入标准，还必须使用私有前缀。这里介绍一下浏览器兼容更好的 JS 实现方式：
记得在开学前夕，某钉子曾无奈地望着手上的各种大坑，对着日益临近的初三昼夜叹息。于是就在那时想起了一直想给博客写个主题，于是……这里就是一篇关于某钉子的第一个 WordPress 试水作的回顾。
Clearison Theme
草率的基调大概是一开始就定好的。在只剩下寥寥数天暑假而且作业没写完（活该）的情况下，主题的大致样式在英语课间的十分钟内迅速定下。刚回到家，在本地PHP环境中安上 WordPress ，然后直接在 wp-content 目录开始了代码。
在此之前还稍微回顾了一下自己过往作品的所谓设计风格，直到端详自己个人页的时候看到那个「交互/前端」……交互前端你妹啊！某人顿时掀桌。没错，直到今天才发现，作为自己选择的两个方向，正常开发过程中还要经过的一步视觉，某人完全没有研究……虽说当年还是以平面设计起家的，但是最后一次开PS貌似只是为了P一张同学的恶搞图片，难怪自己的页面都是所谓「简洁平面化」风格。眼前的道路霎时迷茫起来……
咳咳跑题了。说起来当年好不容易觉得能手写出个页面来时就已经有意要做，曾经下载的 WordPress 主题教程仍静静的呆在硬盘里，当然因为那时菜鸟级的技术没看多少就只能放弃。只是重新翻出来时发现里面引用的大量资源已经失效，于是最后还是在官方模版和官方文档之间各种参考完成的模版。
这是一个 HTML5 的 WordPress 自适应单栏灰色素雅/透明清新双风格主题，风格简洁清新阅读体验良好，适合注重文字的个人博客。附带移动版响应式页面，支持中英文。感谢 @Losses Don 螺丝关于阅读体验的建议。
Clearision V2 灰色素雅风格
Clearision V2.5 透明清新风格
V2.7 主要更新内容：
欢迎在此页提出相关问题和建议！
在CSS中，有一个极其实用的功能：@media 响应式布局。具体来说，就是可以根据客户端的介质和屏幕大小，提供不同的样式表或者只展示样式表中的一部分。通过响应式布局，可以达到只使用单一文件提供多平台的兼容性，省去了诸如浏览器判断之类的代码。
当然这种设计也存在着缺点，比如我所见的不少使用响应式布局的设计在适配移动端时大量使用 display:none 隐藏富媒体元素，这样势必会导致大量不必要的流量。因此，如果有较为重要的移动端需求，那么还是开发专门的移动版页面为好。不过，对于诸如内容较少的页面或者单页式网站来说，响应式布局依然不失为一种偷懒的好方法 ^ ^
<link rel="stylesheet" href="middle.css" media="screen and (min-width: 400px)">
这句意味在满足 media 的判断语句 screen and (min-width: 400px) 即 屏幕并且最小宽度不小于400px 的介质上面使用 middle.css 。