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 实现方式：
那时的某人手头刚好有了点小钱，心里又痒痒的想起了之前搭站的计划。心动不如行动，闲极无聊的某人立刻用 Name.com的域名扫描器 检视各种珍惜域名被遗漏的生僻后缀。在因为各种新出域名的昂贵价格几经绝望之后，忽然， Otaku.tel 这个域名后面 $9.99 的超低价格让某人发现了希望的曙光。
不幸的是 GoDaddy 并不支持 .tel 域名的购买，而 Name.com 无法使用支付宝支付。心急火燎的某人想起了三三曾经提到过的专门做新后缀的国内域名商十一名，果然发现每年76大洋即可拿到。便宜哪有不捡的道理，火速注册并支付提交了订单，在惴惴不安的等待中度过了一个夜晚。
第二天，登上后台的某人惊喜的在已购买服务内看到了域名的管理后台。首先应该做的当然是把DNS解析绑定到 Dnspod ，所以让我们……什么？居然没法保存？？？就说吧！宁可找人代付也要在 Name.com 这样的大站买吧，你小子就猴急吧，说过了国内域名商不能信吧……内心无数草泥马滚滚而过之后，无奈的某人戳开了客服QQ (国内就这好处，比工单快多了) ，然后得到了令人发指的答复……
.tel 域名是没有DNS的，TEL域名是电子名片式域名，全是使用注册局官方统一的页面进行设置，具体的说明教程在你注册后系统有发邮件到您的注册邮箱，也包括官方帐号
——via 客服大叔
嘛，那么一查邮箱，真有封邮件，还附了个PDF。在无比头大的翻阅了一遍09年出的没有技术含量内容超级白痴但是语言生涩难懂的 『.tel 使用指南』(点击下载) 之后，某人掀桌了：这特么不就是一个又难用又难看的收费版顶级米 About.me 嘛！！！ 无法绑定服务器，无法存放网页，一切 A 和 NS 记录都被屏蔽，只支持 TXT 和 MX 记录……要你何用！
为了不让76大洋去的那么无辜，某人硬着头皮开始了这个奇葩服务的体验……以下吐槽 ↓
GoAgent 翻墙成功效果
因为在 Github 上下载的时候实在无法忍受 24 kb/s 的龟速……查了下资料， Linux 下好像比较常用 ssh 翻墙，但对我来说还是 GoAgent 比较熟悉，于是折腾了一下，最终搞定。上教程。
一、准备工作
1、申请 AppID 和 Win 下相同，本文假定已经成功申请到至少一个 AppID ，方法在此不再详述，需要的话请访问：http://blog.howgo.info/archives/3246.html
2、Ubuntu 已经自带 Python ，但是建议还是确认一下。终端 sudo apt-get install python
3、下载 GAE for Linux https://developers.google.com/appengine/downloads?hl=zh-CN
4、下载 GoAgent ，Win 和 Linux 是通用的， Linux 下直接用 .py 脚本运行 https://code.google.com/p/goagent/
在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 。