最近在整理一些自己的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>

[ 查看全文... ]

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

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

今天继续和大家分享一个jQuery弹出框的代码。代码本身很简单，最关键的问题就在于兼容性方面。

HTML CODE:

<a class="popBtn" href="javascript:void(0)">Click Me</a>

<div class="popLayer">
	<div class="popLayerTit">
		<h2>Title</h2>
		<i class="close">[ 关闭 ]</i>
	</div>
	<div class="popLayerCon">
		<p>Text or Other content</p>
	</div>
</div>
<div class="maskLayer"></div>

[ 查看全文... ]

这是我蛮早以前写的一个插件，自己平时的一些项目也是用的这个。一个页面中可以多次调用，并且支持自定义样式。使用的方法也很简单，只要类名一一对应就行。使用方便，如果有什么问题，直接给我留言就行。

调用方法：

$(function(){
	$(".tabs").UblueTabs(); //默认调用方法

	$(".custom").UblueTabs({ //自定义选项卡区域
	tabsTit:".customTit", //自定义标签区域
	tabsTab:".customTab", //自定义标签
	tabsCon:".customCon", //自定义内容区域
	tabsList:".customList", //自定义内容列表
	tabsHover:"customHover", //自定义鼠标点击后样式
	eventType:"click" //鼠标经过标签切换内容 （此处不写则默认为hover事件 当然也可以把这里的click改成hover）
	});
});

[ 查看全文... ]