这里就直入主题了,首先介绍几款能够协助你简单实现但也中切换效果的jQuery插件:
1.pagify.js
pagify.js的原理是利用JS来加载.html文件,实现单页的效果;
实现代码如下:

$(document).ready(function() {
	$('#page_holder').pagify({ //加载在id=page_holder的容器内
		pages: ['page1', 'page2', 'page3'], //加载的页面文件名以及对应的点击按钮id
		animation: 'fadeIn', //切换效果
		'default': 'about', //默认加载about.html
		cache: true  //使用缓存(预加载)
	});
});

优点:是可以分开建立单独的html文件,入门型插件,对前端技术能力要求不高;
劣势:对不同页面中css,js代码的调用会出现问题以及冲突(虽然使用中还未发现,但我认为肯定会有),以及对SEO非常不友好;
Demo请点击这里
GitHub请点击这里

2.impress.js
Demo请点击这里
磊友科技PPT效果 就是用这个JS插件做的;
阅读全文 …

2012 年 11 月 1 日 吴成果, 吴技术

响应式Web,也称之为自适应Web;
当然就是可以根据客户端浏览设备的屏幕分辨率,自动调整排版的Web页面;

做了个简单的页面:
测试地址(请使用移动设备测试) http://www.54575.com/mobile/flexwrap/index.html

本人HTC G7手机截图(竖屏+横屏):

阅读全文 …

2012 年 7 月 13 日 吴成果, 吴技术

本篇文章综合了网上的搜集资料以及自己的经验,从技术角度出发,对不同邮件接收客户端进行系统分析。

2012年7月更新补充:这里找到了一份最新的邮件客户端CSS支持情况表:
链接在这里:http://www.campaignmonitor.com/css/

1.桌面邮件客户端软件

这里我首先排除了Notes邮件客户端,这个属于IBM的,高端了不能再高端的邮件客户端,视乎只适合发送Plain Text邮件,其安全性绝对是最强的,当然,这是在牺牲了所有兼容性后的,在Coca-cola等N百强企业中我们能常见。

AOL的桌面软件也被我排除了,在亚洲地区和欧洲地区,几乎没人用,而美洲的用户也不多,所以这次讨论我也把Aol桌面邮件客户端排除了在外。

接下来的范围就包含了如下软件:
Outlook 2003/97(Windows平台-Office 2003/97) 【国内最常用】
Outlook 2007(Windows平台-Office 2007)
Windows Mail(Windows平台-自带)
Mac Mail(Mac平台-自带)
Entourage 2004(Mac平台-Office 2004)
Entourage 2008(Mac平台-Office 2008)
Thunder Bird 2(Windows/Mac/Linux平台-Mozilla)【兼容性最强,Linux平台必备】

Style Element OL 03 OL 07 Win-Mail Mac-Mail Ent 04 Ent 08 T-Bird 2
<style> in <head>
<style> in <body>
Link Element
<style> in <head>
<style> in <body>
CSS Selectors
e
* ×
e.className
e#id
e:link
e:active, e:hover ×
e:first-line ×
e:first-letter ×
e > f × × ×
e:focus × × ×
e+f × × ×
e[foo] × × × ×
CSS Properties
background-color
background-image ×
background-position ×
background-repeat ×
border
border-collapse ×
border-spacing × × × ×
bottom ×
caption-side × × × × × ×
clear ×
clip ×
color
cursor × ×
direction × ×
display ×
empty-cells × × × ×
float ×
font-family
font-size
font-style
font-variant
font-weight
height ×
left ×
letter-spacing
line-height
list-style-image ×
list-style-position ×
list-style-type ×
margin
opacity × × × ×
overflow × ×
padding
position ×
right ×
table-layout
text-align
text-decoration
text-indent
text-transform
top ×
vertical-align ×
visibility ×
white-space × ×
width ×
word-spacing ×
z-index

2.Web邮件客户端
Yahoo (经典老牌在线邮件客户端-可能是全球市场占有率最高的免费邮箱了)
Gmail (新兴的在线邮件客户点-笔者最常用的)
Live/Homtial (微软经典的客户端-可惜在国内市场占有率不高,若不是因有MSN做后盾,估计没多少人会用)
AOL (美洲的市场占有率颇高的一个在线邮件系统)
Apple (苹果在线邮件客户端)
163 (国内市场占有率最高的免费邮箱)
Sina (传统的国内免费邮箱)
QQ邮箱 (凭借的强大IM软件,开始逐渐扩大国内市场的占有率)
由于国内的163/Sina/QQ邮箱都采用了Frame技术,几乎支持除Flash,Javascript,ActiveX,DHTML,Java Applet外所有的标签和样式,所以就不列举在下列表格中了。

Style Element Yahoo Gmail Live Aol Apple
<style> in <head> ×
<style> in <body> ×
Link Element
<style> in <head> ×
<style> in <body> ×
CSS Selectors
e ×
* ×
e.className ×
e#id × ×
e:link × ×
e:active, e:hover × ×
e:first-line × ×
e:first-letter × ×
e > f × × × ×
e:focus × × ×
e+f × × × × ×
e[foo] × × ×
strong>CSS Properties
background-color
background-image × ×
background-position × ×
background-repeat × ×
border
border-collapse
border-spacing ×
bottom × × ×
caption-side ×
clear
clip × × × ×
color
cursor ×
direction ×
display
empty-cells
float
font-family ×
font-size
font-style
font-variant
font-weight
height
left × × ×
letter-spacing
line-height
list-style-image × ×
list-style-position
list-style-type
margin ×
opacity × × ×
overflow
padding
position × × × ×
right × × ×
table-layout
text-align
text-decoration

2011 年 1 月 1 日 吴成果, 吴技术