最近在整理一些自己的DEMO...发现有些DEMO因为太久了，自己都忘记了。所以还是贴出来吧，既是分享也是便于自己查看。

随着手机越来越智能、平板电脑越来越主流，移动终端大赶超传统PC只是时间的问题。可随时而来的问题就是，移动终端由于为了适合各种人群和需求，往往屏幕的尺寸层出不穷。这就导致很多网站看起来不伦不类，在PC上看明明很好，但一到小屏幕的移动端，就完全变形或者呈现效果不佳。为此，一些网站往往根据不同的屏幕分辨率，制作不同样式的页面，但这样就大大增加了成本。

科技是与时俱进的，技术也是与时俱进的，所以老外就想到了“响应式Web设计(Responsive Web Design)”。其概念就是根据不同的设备，不同的屏幕进行响应，调用最符合当前用户的一个网页风格。（其实我的网站很早以前就应用了响应式web设计，不过仅仅针对小于1240的屏幕做了“一个”窄版的风格，可能没什么人会注意到此细节。）

另外相对应的优势也十分明显：页面只有一个，只是针对不同的分辨率、不同的设备环境进行了一些不同的设计，所以在开发、维护和运营上，相对多个版本，能节约成本。 兼容性优势：移动设备新的尺寸层出不穷，定制的版本通常只适用于某些规格的设备，如果新的设备分辨率变化较大，则往往不能兼容，而开发新的版本需要时间，这段时间内的访问就是个问题，但是响应式Web设计可以提前预防这个问题。 操作灵活：响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。 [ 查看全文... ]

今天周五，放松一下、欢乐一下吧。《十万个冷笑话》又出新的了~ 在很久很久以前，有一座葫芦山，镇压着一只千年蛇妖...
吐槽一句：爱奇艺的分享外链太差劲了... 所以本人只能坚持一贯原则，仍然使用优酷播放。

[ 查看全文... ]

今天的例子中，我主要想讲的是transform-style:preserve-3d和box-sizing:border-box这两个属性。

对于preserve-3d，这里要说明的是，它只影响这个元素的子元素（二级元素），孙元素（三级元素）如果也想拥有3D模式，那么就必须给它的上级元素（父元素）也添加preserve-3d。

box-sizing是我们平时比较少接触到的属性，其分辨有2个值content-box和border-box。
content-box：此属性表现为标准模式下的盒模型（当我们设置元素的width和height时，它的宽度不包括border和padding。例：width:100px; border-width:10px; 元素实际宽度为220px;）
border-box：此属性表现为怪异模式下的盒模型（和content-box相反，它的宽度包含border和padding。例：width:100px; border-width:10px; 此时的border相当于内边距，元素实际宽度仍为200px;）

好了，接下来我们就看例子吧：
[ 查看全文... ]

今天的内容非常简单，但有个比较关键的属性：perspective（透视）。所有元素都是放置在z=0的平面上perspective属性设置镜头到元素平面的距离（学过AUTOCAD的童鞋应该很容易理解吧）。是不是还有点云里雾里呢？我们来举个例子，想想你从天上俯看一座金字塔。镜头到元素平面的距离，就是塔的顶部（视点）和地面（Z-平面）之间的距离。

HTML CODE：

<div class="wrapper">
	<div class="logo"></div>
	<div class="logo_text">Windows 8</div>
</div>

[ 查看全文... ]

由于部分原因，刚才下载了一个360安全浏览器(下文简称:360浏览器)。在打开我的网站的时，发现在地址栏旁有一个“网站名片”的按钮，处于好奇就点了下。惊奇的发现，居然能够显示出当前网站的ICP备案信息，并且列出了我的真实姓名。对此，我对此表示十分不满，也促使了我写下这篇博文。

什么是ICP备案？
ICP-(Internet Content Provider)网络内容服务商 ，即向广大用户综合提供互联网信息业务和增值业务的网络运营商。ICP备案是信息产业部对网站的一种管理，为了防止非法网站。我们来举个简单的例子，就像开办公司需要去工商部门注册并办理相关的营业执照一样，而ICP备案的目的于此类似。

此时我就不禁想问，360浏览器真的“安全”吗？这是不是在泄露站长的个人隐私呢？ [ 查看全文... ]

唠叨一下：
一直没时间去研究视差滚动的内容，乍看之下还觉得挺难、蛮麻烦的，不知道你有没有同感？我在度娘找了半天，也没找到什么有用的资料（起码我没找到，要么就是写的像天书一样，没精力去折腾）谷歌么自从X8大以来，一直处于悲剧状态。这两天正好空闲下来，就又去找了下相关的资料。不看不知道，一看吓一跳，顿时恍然大悟，原来那么简单。。。

什么是视差滚动？
视差滚动（Parallax Scrolling）视差滚动是一个二维动画制作过程，创建一个动画前景层的速度比背景层深度的幻觉。简单的说，就是让多个层面的东西(如果你有接触过PS或FLASH，应该很容易理解"层"这个概念)，以不同的速度移动，形成立体的运动效果。举个例子，当你坐在行驶中的汽车内，看着窗外近景的树木，再看远处的山或事物，你会发觉树移动的很快，而远处的事物却移动的很慢。视差滚动使用相同的原则来误导人们眼睛，以为他们所观察到的3D场景。具体描述，可以查看维基百科 Parallax scrolling [ 查看全文... ]