你所选择的标签为: HTML

响应式Web设计(Responsive Web Design)简述

09

December

2012

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

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

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

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

CSS3 制作3D旋转球体

28

November

2012

今天的例子中,我主要想讲的是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;)

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

CSS3 绘制Windows 8 logo

27

November

2012

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

HTML CODE:

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

[ 查看全文... ]

jQuery Parallax Scrolling Website(视差滚动网站制作)

23

November

2012

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

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

Ublue jQuery 弹出框 始终垂直于屏幕中间 完美兼容IE6

22

November

2012

今天继续和大家分享一个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>

[ 查看全文... ]

Ublue jQuery Tabs插件 支持自定义样式 可多次调用

20

November

2012

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

调用方法:

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

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

[ 查看全文... ]