这是一个 HTML5 + CSS3 的个人名片页，附带响应式移动版，兼容 IE9 及以上浏览器。
dp-card
最近有不少同学表示了对钉子目前个人页的喜爱，虽然个人觉得并不咋滴， 正好准备过段时间重新设计新版的个人页，于是好好修正了一下放出来了。出于无聊重新修改了各种语义化标记，把脚本也重做了，并且通过了 W3C 验证，感谢 @JoyNeop 菊苣的挑刺 …… 纯 HTML5 页面，需要请自行修改相关内容。有问题可以回复，可能不接受新的功能需求。
dp-card – 钉子的个人页一代
Fly Out.
大概也不过是 2013 年 6 月 20 日，也就是正好半年前， Dimpurr 这个奇怪的拼写被赋予了含义。自此之后又过了无数个白天和夜晚，直到某天大概仅仅是觉得有必要再为自己写一篇相对详细的自述了，亦或是忽然间有些无聊，总而言之，就有了这篇间杂了回忆和痴想的意识流文章的存在。
StartPress – 空 WordPress 主题脚手架
这是一个 HTML5 的空 WordPress 主题，可以基于此快速开始新主题的创作。内置了基本的输出结构和函数，没有任何多余样式标签。目前处于早期测试版本还较不稳定，欢迎试用和反馈。Github 项目地址→
StartPress
因为连续制作了几个主题之后遇到了例如首页 meta 标签等的复用问题，于是就花了一晚上在几个主题的基础上修改合并成了这个空主题，并加上了注释。这只是一个单纯的空白主题，并且内置了一些常用函数，并不是一个框架，也没有复杂的功能。代码格式和文件结构有一定的个人风格，也欢迎诸位来添砖加瓦。预计将会在今后增加关于后台设置的框架。
カラフルなのダイヤルパッド
大概当时的钉子，还处在非常好的状态。期中考做好历史新低的准备，结果是历史新高；只接过两百元的第一单，然后就接到了一千五的第二单……于是某人果断决定出血一回，稍微慰劳一下自己劳累的心灵——
钉子の无脑购物行为 案发现场底片
页面布局孰优孰劣：基于REM的EMs弹性布局——可用性的胜利
页面布局的方式总是随着技术的更新和创意的涌现不断的更新换代。从最开始的 Fixed 固定布局，到因为宽屏设备和移动互联网的普及产生的响应式和自适应，再到「Mobile First」的设计理念，前端们在可用性方面做的努力越来越多。
REM 是一个在 CSS3 中被提出的新单位，相对 EM 变为了针对根元素 <html> 的 font-size 计算，使得便利性大为提升的弹性布局再次被提上话题。在介绍具体实现之前，不妨先说说为何要选择 EMs 进行布局。
脱离了表格布局的蛮荒时代后，越来越多的基本布局方式被应用在了实践中，当然也不乏多种配合。以下就是几个常用技术的对比。（响应式和自适应这两个名词经常被错误使用，例如 自适应网页设计（Responsive Web Design） 这篇文章
- 固定 Fixed
使用 px 和 pt 这样的绝对单位进行固定布局。在无论什么设备上保持固定的尺寸，在不适合的分辨率下可能导致大面积空白或横向滚动条。最经典，也是被证明极其不友好、维护困难的方法。 - 流动 Fluid
使用 % 百分比进行相对布局。可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。某些情况下可能导致错误的伸缩或者布局被破坏。 - 弹性 Elastic
使用 em 或 rem 单位进行相对布局。避免了根据 px 布局在高分辨率下几乎无法辨认的缺点，又相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。需要一段时间适应而且不易从其他布局转换过来，但几乎是目前最好的布局方式。 - 伸缩 Flexbox
使用 CSS3 Flex 系列属性进行相对布局。对于富媒体和复杂排版的支持非常强大，但是还未普及并且兼容性较差。 - 响应式 Responsive
使用 @media 媒体查询 给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，但是在同一个设备下实际还是固定的布局，并且因为浏览器的支持原因对介质的检测还不实用。 - 自适应 Adaptive
通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是利用响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术综合统称。自适应几乎已经成为优秀页面布局的标准。
为 WordPress 主题添加文章形式支持和注册自定义类型
WordPress 3.1 之后，推出了一个模仿 Tumblr 的「文章形式」功能，可以让博客中除了默认的文章之外展现出更多的特殊样式。不同的文章形式，可以支持在输出时进行判断处理，以及列出存档等等……很多细心的主题里面都会加上对一些文章形式的支持，如果在面临特殊需求时，希望能够自定义专门的编辑器或者分类目录，那么还可以去注册一个自定义的文章类型。
一 内置形式
WordPress 已经内置对几种常用的文章形式的支持，如果可以满足需要，那么就不需要再重复造轮子了，只需要添加主题对已有形式的支持就好了。内置形式列表如下：
- standard – 标准，也就是默认的文章形式
- aisde – 日志，实质上就是个不显示标题的标准文章
- link – 链接，类似 Tumblr 的链接分享
- quote – 引语，展示为引用的一段文字
- status – 状态，简而言之就像是一条 Tweet
- image – 图像，发布单张图片
- gallery – 相册，也就是扩充的图像功能
- audio – 音频，……需要说吗
- video – 视频，……同上
- chat – 聊天，以专门格式显示聊天记录
如果想添加对以上形式的支持，只需要在 functions.php 里添加对应的项目即可，然后在输出文章的时候使用函数判断切换不同的样式：
First Blood! 人生第一桶金 Get
钉子最近各种销声匿迹，许多文章也拖着迟迟没有码完，至于这单儿，已经是两周以前的事儿了。时间久远略微有点记忆模糊，不过为了纪念，还是在此回忆一下国庆那时的一血达成之路吧。
Alipay
@Losses Don 螺丝菊苣找到钉子时，还从未做过 Discuz! 模板更别说商业模板的某人还不太敢接。任务很简单，不需要再从头做设计，按照一个现成的 Typecho 模板风格套用上去即可。口上说着不一定做， 身体还是挺老实的嘛 不过钉子还是马上查起了相关的教程。
「唉 就是个想做站刚入行不知道水多深的家伙 我也就是帮忙忙活一下 ._. 工作量不大 不过很闹心 你做做就知道了= =」
——螺丝菊苣如是说
在那之前钉子只有做过一次 WordPress 的主题，充分享受了其完善的官方文档和开发资源的福利，自然不会料到接下来的艰辛。混乱过时的各种教程，语焉不详的模板文档，首先就来了一个下马威。在无奈放弃了寻找教程之后，某人对着默认模版敲起了代码。还没开始多久，调用LOGO这一关就被间歇性失灵的新老版本两个模版目录调用语句卡住了。钉子终于开始体会到了闹心这个词的含义。
你所不知的 CSS ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面，里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外，就是接下来要介绍的这两个伪元素了。
Creative Button Styles
一 基本语法
在了解进阶的应用之前，先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时，只需使用伪类使用的单冒号写法，以保证浏览器的兼容性：
袭来！强台风天兔
本来是假期的最后一晚，中秋节的最后一日；本来该内宿匆忙生回校，外宿生狂补作业；但是，随着一条震撼性的消息传来，顿时喜大普奔，举校欢腾——
因强台风天兔即将登陆，惠州市全市中小学统一停课两天，请各校领导老师做好协调工作。惠州市教育局
正所谓，不以停课为目的的台风都是耍流氓。
Typhoon Usagi (Pixiv ID 38586013)
「台风要不要放假？」平常寂静无声的班级群，霎时间热闹起来。有说没校讯通而且内宿生都返校了不可能的，有说是校讯通故障已经问了老班没错的，有说惠高这尿性那么多次全市放假都不放何况要考试的，有说内宿生已经在遣返了说说为证的……最后老温在家长群里简短的一句「因台风影响停课两天」，最终宣布了中秋假期的延长。
已经没有再列出同学们听到如此喜讯后做出的如同吸食了鸦片般的疯狂举动的必要，简而言之诸如「正准备背历史，听到消息后马上跑去开电脑了」的动态顿时占满了空间。本来在苦苦复习的某钉子，当然也立刻趴到电脑前继续码主题。
第一天的早上，阳光明媚的天气还让人不禁感慨预报目测很是不准。只是从中午开始的淅淅沥沥的小雨，不知道什么时候又成了倾盆大雨，什么时候又响起了呼啸的风声。大概是某人无法忍受在这样的环境下写作业而关上窗户时，台风已经开始了。
作为一个算是沿海的城市，台风也不是没见过了。但是天兔的发展完全超乎了意料，天色未暗，已经没有任何的人和车辆敢在暴怒的雨水中穿行。雨点啪嗒啪嗒的敲打着玻璃，试图顶着风把窗户推开却从缝隙中吹进来的强风中领教到了气压差的威力。简而言之，某人从未见过的最大的台风，开始了。
使用 position: sticky 达到粘性元素区域悬浮效果
在一些很长的表格中，常常会使用表头悬浮的设计以方便阅读，即在表格离开窗口之前，表头会一直 fixed 悬浮在表格的最顶上。还有许多诸如评论框等元素，也采用了这种被称为 Sticky Pin 或者 粘性元素 的设计。
这种效果一直以来需要通过 JavaScript 实现。不过就在去年，这项结合了 Relative （在屏幕中时） 和 Fixed （移出屏幕时） 的样式效果被提案添加到了 CSS3 中。下面是一个示例：
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: sticky;
top: 15px; // 使用和 Fixed 同样的方式设定位置
}
因为这个样式尚未进入标准，还必须使用私有前缀。这里介绍一下浏览器兼容更好的 JS 实现方式：
某釘子のWP主題 第一季
记得在开学前夕，某钉子曾无奈地望着手上的各种大坑，对着日益临近的初三昼夜叹息。于是就在那时想起了一直想给博客写个主题，于是……这里就是一篇关于某钉子的第一个 WordPress 试水作的回顾。
Clearison Theme
草率的基调大概是一开始就定好的。在只剩下寥寥数天暑假而且作业没写完（活该）的情况下，主题的大致样式在英语课间的十分钟内迅速定下。刚回到家，在本地PHP环境中安上 WordPress ，然后直接在 wp-content 目录开始了代码。
在此之前还稍微回顾了一下自己过往作品的所谓设计风格，直到端详自己个人页的时候看到那个「交互/前端」……交互前端你妹啊！某人顿时掀桌。没错，直到今天才发现，作为自己选择的两个方向，正常开发过程中还要经过的一步视觉，某人完全没有研究……虽说当年还是以平面设计起家的，但是最后一次开PS貌似只是为了P一张同学的恶搞图片，难怪自己的页面都是所谓「简洁平面化」风格。眼前的道路霎时迷茫起来……
咳咳跑题了。说起来当年好不容易觉得能手写出个页面来时就已经有意要做，曾经下载的 WordPress 主题教程仍静静的呆在硬盘里，当然因为那时菜鸟级的技术没看多少就只能放弃。只是重新翻出来时发现里面引用的大量资源已经失效，于是最后还是在官方模版和官方文档之间各种参考完成的模版。
Clearision V2.7 – 简洁清新自适应单栏 WordPress 主题
这是一个 HTML5 的 WordPress 自适应单栏灰色素雅/透明清新双风格主题，风格简洁清新阅读体验良好，适合注重文字的个人博客。附带移动版响应式页面，支持中英文。感谢 @Losses Don 螺丝关于阅读体验的建议。
Clearision V2 灰色素雅风格
Clearision V2.5 透明清新风格
V2.7 主要更新内容：
- 新增引语和状态文章格式支持
- 新增香港、台湾繁体语言包
- 修正样式和更新上的已知问题
欢迎在此页提出相关问题和建议！