使用方法：

1
2
3
4
5
6

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->

引用函数是DD_belatedPNG.fix()，括号里的 .png_bg 改成你的css选择器名称。

ID选择器例子：

1

  DD_belatedPNG.fix('#png');

伪类例子：

1

  DD_belatedPNG.fix('.png a:hover,.png a:focus');

img标签例子：

1

  DD_belatedPNG.fix('img');

如果是多个直接加逗号（英文下的）就行。例如：

1

  DD_belatedPNG.fix('.png_bg,#png,.png a:hover,.png a:focus,img');

JS文件下载地址：
0.0.8a.js (未压缩版本)
0.0.8a-min.js (压缩版)

官方网站：DD_belatedPNG

最后期待IE6早日退出历史舞台！ ^o^

1.随滚动条滚动居中展示。
如果是常用及熟悉fancybox基本属性的朋友，应该了解这个属性，这也是为了更好的用户体验。

1

'centerOnScroll'	: true

2.给按钮添加fancybox事件。由于官方demo都是基于超链接的事件，读取a的href链接属性获取需要弹出的内容。如果是按钮的话，是可以直接设置弹出内容的链接，不用在按钮的标签里设置属性。
（1）指定弹出层的ID。

1

'href'	: '#yourDivName'

这里的yourDivName就是需要弹出的div的ID了，注意前面加上#。

（2）指定弹出的内容，可以是HTML。

1

'content'	: 'yourContent'

这里的yourContent就是弹出显示的内容，可以是HTML。

3.添加关闭事件。
（1）非iframe弹出类型的添加关闭事件。

1

$.fancybox.close();

也可以直接在按钮或超链接上添加，这个就不说了。

（2）iframe类型弹出的添加关闭事件。

1

parent.$.fancybox.close();

另外，如果需要获取iframe父页面上的元素，可以使用$(window.parent.document)。

1

$(window.parent.document).find("#informContentList").html(data);

4.弹出背景不可点击。默认的选项设置里，如果有弹出层，点击内容区外的遮罩背景，是可以关闭弹出层的。如果不想这样可以设置以下属性。

1

'hideOnOverlayClick': false

5.fancybox被flash挡住的解决方法。这个我常用的是给flash添加以下属性。

1

<param name="wmode" value="transparent" />

6.给动态添加的元素设置fancybox弹出。由于项目需要，用jquery ajax添加的多条记录，需要将它们动态生成显示出来并可以编辑。为了方便用户体验，也用fancyobx做成了可以弹出修改每个的具体内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(document).ready(function(){
	$("a.contentModify").live("click",function(){
		$.fancybox({
				'width'				: 670,
				'padding'			: 0,
				'centerOnScroll'	:true,
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'href'				: 'modify.php?id='+$(this).attr('data'),
				'type'				:'iframe',
				'hideOnOverlayClick': false
		});
		return false;
	});
});

在这里，我是给是动态生成的所有超链接添加了fancybox弹出层，并且是以iframe形式弹出的，以便动态修改每条记录。
首先是用到了live属性，然后直接使用$.fancybox就可以了，其余的fancybox选项可以自己设置。
另外iframe弹出的窗口最好像上面这样在fancybox里设置宽度，因为我在css里设置的宽度，发现弹出后的实际宽度并不是css里设置的。

7.制作弹出提示效果，自定义弹出层内容，不需要绑定在指定元素上，并自动关闭。一般都会觉得IE默认的弹出提示不好看，不够友好。使用fancybox也可以简单的做出弹出提示。

1
2

$.fancybox('<div class=\"boxSuccess\">退出成功！</div>');
setTimeout("$.fancybox.close()",2000);

附上css代码：

1

.boxSuccess {width:170px; height:80px; padding:52px 0 0 100px; color:#f00; line-height:20px; background:#fff url(images/success.jpg) 30px center no-repeat;}

简单几行代码，实现自定义弹出提示并在2秒后自动关闭。提供以上思路，自己发挥，呵呵。

以上是基于Fancybox 1.3.4总结的。
总之是多看官方API，多用多挖掘它的用处，呵呵。

Facnybox官方API地址：http://www.fancybox.net/api

好了，先就总结这么多了。欢迎指正和交流。

附上demo，包含了以上几点。

作者：Beautycss
转载请注明出处。谢谢。

1、border-radius

border-radius

border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。

1
2
3

-webkit-border-radius: 4px;  
-moz-border-radius: 4px;  
border-radius: 4px;

注意：请在Safari 5 和 IE9浏览器中执行”border-radius”语法。

许多读者也许不会意识到我们可以用这个属性来做一个圆。

1
2
3

-moz-border-radius: 50px;  
-webkit-border-radius: 50px;   
border-radius: 50px;

圆

如果想再添加点效果，我们可以利用Flexible Box Model（详情在8中）来使得文字在垂直在水平方向都居中。这需要加点代码，但这仅仅是对不同浏览器的补偿。

1
2
3
4
5
6
7
8
9
10
11
12

display: -moz-box;  
display: -webkit-box;  
display: box;  
-moz-box-orient: horizontal; /* the default, so not really necessary here */
-webkit-box-orient: horizontal;  
box-orient: horizontal;  
-moz-box-pack: center;  
-moz-box-align: center;  
-webkit-box-pack: center;  
-webkit-box-align: center;  
box-pack: center;  
box-align: center;

2、 box-shadow

box-shadow

接下来是非常普遍的box-shadow，可以使你的元素立即美化，只是记得不要把值设得太离谱。

1
2
3

-webkit-box-shadow: 1px 1px 3px #292929;  
-moz-box-shadow: 1px 1px 3px #292929;  
box-shadow: 1px 1px 3px #292929;

box-shadow的四个参数

1. x-offset x轴偏移
2. y-offset y轴偏移
3. blur 模糊值
4. color of shadow 阴影颜色

现在，许多人不知道可以一次运用多个box-shadows，这样做会产生一些有趣的效果。在下图中，我使用蓝色和绿色阴影来放大一下效果。

box-shadow

1
2
3

-webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;  
-moz-box-shadow: 1px 1px 3px green,-1px -1px blue;  
box-shadow: 1px 1px 3px green, -1px -1px blue;

Clever Shadows

1
2
3

    <div class="box">     
    	<img src="tuts.jpg" alt="Tuts" />  
    </div>

The CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.box:after {     
    content: '';     
    position: absolute;        
    z-index: -1; /* hide shadow behind image */        
 
    /* The Shadow */     
    -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);     
    -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);     
    -box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);                        
    width: 70%;     
    left: 15%; /* one half of the remaining 30% (see width above) */
    height: 100px;     
    bottom:  0;  
}

3、 text-shadow

text-shadow

text-shadow是我们可以省略前缀的几个CSS属性之一，类似的还有box-shadow，它必须应用于文本，并它们有相同的四个参数：

1. x-offset 水平位移
2. y-offest 垂直位移
3. blur 模糊值
4. color of shadow 阴影颜色

1
2
3
4

h1 {      
    text-shadow: 0 1px 0 white;      
    color: #292929;   
}

Text-Outline 和box-shadow一样，它可以设置多个阴影通过逗号分隔符。例如，我们创建文本框的轮廓，当webkit不支持stroke效果，我们可以使用下面的代码让更多的浏览器支持（虽然不是很美观）。

1
2
3
4
5
6

body { background: white; }
 
h1 {     
    text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;     
    color: white;  
}

Text-Outline

4、 Text-Stroke

Text-Stroke

使用这个方法时要注意了，只有webkit（Safari， Chrome， iPhone）在最后的几年内还支持这个属性。其实，虽然我可能是错的，text-stroke还不属于CSS3范畴的一部分。在这种情况下，使用白色字体时，firefox会显示一个空白页面。要解决此问题，你即可以使用Javascript，也可以通过使用一种不同于背景颜色的文字颜色。

1
2
3
4

h1 {     
    -webkit-text-stroke: 3px black;     
    color: white;  
}

Feature Detection 我们如何为firefox提供一组可用的样式，和为另外的一组Safari或Chrome？解决办法就是多做测试。 通过feature detection，我们可以利用JavaScript来测试某属性是否可用，如果不行，我可就要采用备用的。 再回到text-stroke的问题上，为不支持此属性的浏览器设定一个备用黑色（目前的除webkit外）。

1
2
3
4
5

var h1 = document.createElement('h1');  
if ( !( 'webkitTextStroke' in h1.style ) ) {     
    var heading = document.getElementsByTagName('h1')[0];     
    heading.style.color = 'black';  
}

首先我们设定一个h1元素，然后执行，通过样式属性以确定-webkit-text-stroke是否支持此元素。如果不支持，我们会把标题由白色设置成黑色。

5、 Multiple Backgrounds

Multiple Backgrounds

Background属性在CSS3样式中已经彻底改革，开始支持多背景图片。 举个简单的例子，如果没和合适的图像，我们将使用两个教程的图像作为我们的背景，当然在程序中你可能会用纹理，也许是渐变作为图像。

1
2
3
4

.box {  
    background: url(image/path.jpg) 0 0 no-repeat,   
    url(image2/path.jpg) 100% 0 no-repeat;  
}

以上，通过逗号分隔符，插入了两张背景图像，第一个的定位是（0，0），第二个的定位是（100%，0）。 要确定你对不支持的浏览器使用了备用图片，否则，它将跳此属性，使背景图像留空。 对旧浏览器的补偿 要添加一张单独的图像给老浏览器用，像IE7。要定义两遍background，一遍是为老浏览器，另一遍是重写。或者你可以再次查看下Modernizr。

1
2
3
4
5
6
7
8

.box {  
    /* fallback */  
    background: url(image/path.jpg) no-repeat; 
 
    /* modern browsers */  
    background: url(image/path.jpg) 0 0 no-repeat,   
    url(image2/path.jpg) 100% 0 no-repeat;  
}

6、 background-size

目前我们已经可以使用这种比较灵活的方式去重定义背景图像的大小。

1
2

background: url(path/to/image.jpg) no-repeat;  
background-size: 100% 100%;

上面的代码使得背景图像已经占据了整个可用空间。但是，如果我们使用一个特殊的图片去占据body元素的整个空间而无论窗口有多宽，那又怎么做？

1
2
3
4
5
6

body, html { height: 100%; }    
 
body {   
    background: url(path/to/image.jpg) no-repeat;   
    background-size: 100% 100%;  
}

对，就是这么做，分别定义background-size的x，y参数。 最新版本的Chrome 和 Safari支持此属性，但我们还是要用旧的方法支持旧的浏览器。

1
2
3
4
5
6
7

body {   
    background: url(path/to/image.jpg) no-repeat;   
    -moz-background-size: 100% 100%;   
    -o-background-size: 100% 100%;   
    -webkit-background-size: 100% 100%;   
    background-size: 100% 100%;  
}

7、 text-overflow

浏览器最初开发文本溢出属性可以设定两个值：clip ellipsis 此属性支持切断容器中的文本，而且也给出了一个省略号的特性。

text-overflow

1
2
3
4
5
6
7
8
9
10

.box {     
    -o-text-overflow: ellipsis;     
    text-overflow:ellipsis;     
    overflow:hidden;     
    white-space:nowrap;     
    border: 1px solid black;     
    width: 400px;     
    padding: 20px;     
    cursor: pointer;  
}

或许你会考虑当鼠标经过时显示全部的文本内容。

1
2
3
4
5
6

#box:hover {    
    white-space: normal;    
    color: rgba(0,0,0,1);    
    background: #e3e3e3;    
    border: 1px solid #666;  
}

有点奇怪，这看起来并不像是重置text-overflow属性或是停用它，使之生效，在on:hover中我们可以使得white-space的normal属性。现在正常了。 知道吗？您还可以指定自己的字符串，应使用省略号的位置。这样做来修饰要显示的文本字符串。

8、 Flexible Box Model

Flexible Box Model将最终使我们远离类似float的困扰。虽然是要给你的头部换一个新的属性，但一旦你这么做了，将终身受益。 做个演示，创建简单的两列布局。

1
2
3
4

<div id="container">   
    <div id="main"> Main content here </div>   
    <aside> Aside content here </aside>  
</div>

首先我们要设定一个容器，然后指定它的宽和高，即便是没有实质性的内容在里面。

1
2
3
4
5
6
7
8
9

#container {      
    width: 960px;      
    height: 500px; /* just for demo */         
    background: #e3e3e3;      
    margin: auto;         
    display: -moz-box;      
    display: -webkit-box;      
    display: box;
}

接下来分别定义#main和aside的背景色

1
2
3
4
5
6
7

#main {     
	background: yellow;  
}    
 
aside {     
	background: red;  
}

到目前为了还没有看出什么效果来。

值得一提的是，虽然我们设置了display:box模型，它的子元素会占据整个垂直空间。这就是它的默认box-align属性stretch。 看看有什么效果产生，当我们设置了#main的宽度后。

1
2
3
4

#main {    
    background: yellow;    
    width: 800px;  
}

Flexible Box Model

但是我们仍有个疑问，为什么aside不占据剩余的全部空间呢？我们可以用新属性box-flex来试下。 box-flex 使得元素占据整个空间。

1
2
3
4
5
6
7
8
9

aside {      
    display: block; /* cause is HTML5 element */      
    background: red;        
 
    /* take up all available space */      
    -moz-box-flex: 1;      
    -webkit-box-flex: 1;      
    box-flex: 1;   
}

使用这个属性后，不管#main有多宽，aside都将占据整个可用的空间。同时你也不必担心诸如float等产生的问题，像使得元素被排挤到下一行。

Flexible Box Model

我只是在这儿肤浅的说一下，请参阅保罗爱尔兰优秀文章的详细信息。然而，使用此方法的时候也应注意一下兼容问题，例如老的浏览器应该先测试下，并且提供必要的备注。

9、 Resize

只有Firefox 4和Safari 3支持此属性。Resize是CSS3 UI模型中的一部分，可用于重定义textarea的大小。

1

<textarea name="elem" id="elem" rows="5" cols="50"></textarea>

默认情况下webkit浏览器和Firefox 4支持水平和垂直方向上的重定义。

1
2
3
4
5

textarea {     
    -moz-resize: vertical;     
    -webkit-resize: vertical;     
    resize: vertical;  
}

可能的值：

1. both： 重定义水平和垂直方向
2. horizontal： 水平调整大小限制
3. vertical： 垂直调整大小限制
4. none： 不支持重定义

Resize

10、 Transition

也许CSS3最令人兴奋的增补，就是在没有 JavaScript 的元素的情况下产生动画。 好像IE9还不支持此功能，但这并不代表你不能使用这个功能，关键是在于提高技能。 现在模仿一个效果，当鼠标滑过右侧链接时，文本向右滑动。
The HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<ul>     
    <li>        
    	<a href="#"> Hover Over Me </a>     
    </li>     
    <li>        
    	<a href="#"> Hover Over Me </a>     
    </li>     
    <li>        
    	<a href="#"> Hover Over Me </a>     
    </li>     
    <li>        
    	<a href="#"> Hover Over Me </a>     
    </li>  
</ul>

The CSS

1
2
3
4
5
6
7
8
9
10

ul a {      
    -webkit-transition: padding .4s;      
    -moz-transition: padding .4s;      
    -o-transition: padding .4s;      
    transition: padding .4s;   
}     
 
a:hover {      
	padding-left: 6px;   
}

transition 有三个参数：

1. The property to transition. （Set this value to all if needed） 转换属性。（设置此值为所有如有需要）
2. The duration 持续时间
3. The easing type 缓动类型

为什么我们不将transition直接应用到hover上呢？是因为我们只是在mouseover时生效，当mouseout时元素将立即返回到其最初的状态。 因为我们对效果做了调整，所有对旧的浏览器不会产生任何影响。 接下来是通过文章所学，我们来建立的一个简洁的效果。大家可以通过查看源码来学习来。具体如何创建我就不翻译了。

中文来源：http://www.js8.in/648.html

英文原文：10 CSS3 Properties you Need to be Familiar with

Web技术的发展速度太快了，如果你不与时俱进，就会被淘汰。因此，为了应对即将到来的HTML5，本文总结了22个HTML5的初级技巧，希望能对你进一步学习好HTML5会有所帮助。

1. 新的Doctype声明

XHTML的声明太长了，我相信很少会有前端开发人员能手写出这个Doctype声明。

1
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5的Doctype声明很短，看到这个声明相信你马上就能记住，不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。

1

<!DOCTYPE html>

HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式，你可能会奇怪IE6/7居然也可以支持HTML5 Doctype，事实上，IE是只要doctype符合 这种格式，都会进入标准模式。

2. <figure>标签

看看下面一段简单的代码：

1
2

<img src="path/to/image" alt="About image" />  
<h6>Image of Mars.</h6>

遗憾的是，这里的h6标签和img标签好像没有什么关系，语义不够明确。HTML5意识到了这一点，于是就采用了<figure>标签。当<figure>结合<figcaption>标签的使用，可以让h6标签和img标签组合起来，代码就更具语义化了。

1
2
3
4
5
6

<figure>
   <img src="path/to/image" alt="About image" />  
<figcaption>
<h6>This is an image of something interesting. </h6>
</figcaption>
</figure>

3. 重新定义<small>

不久前，我使用了<small>标签来创建与logo相关的副标题。但是在HTML5中重新定义了<small>标签，使之更能表现语义化，在<small>的字号都会变小，想想如果这个标签用于网站的底部的版权信息还是个不错的做法。

4. 去掉了Javascript和CSS标签的type属性

通常你会在<link>和<script>加上type属性：

1
2

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
 <script type="text/javascript" src="path/to/script.js"></script>

在HTML5中，不再需要type属性了，因为这显得有点多余，去掉之后可以让代码更为简洁。

1
2

<link href="path/to/stylesheet.css" />
 <script src="path/to/script.js"></script>

5. 是否使用双引号

这有点让人纠结，HTML5并不是XTHML，你可以省去标签中的双引号。相信大多数同志也包括我都习惯了加上双引号，因为这让代码看起来会更标准。不过，这可以根据你的个人喜好来确定是到底要不要双引号。

1

<h6 class=myClass id=someId> Start the reactor.</h6>

6. 使网页内容可以编辑

这是HTML5新增的一个功能，在标签中加上一个contenteditable属性，并且设置值为true，就可以直接在页面上编辑这个标签的内容，包括这个标签的子级标签的内容。有了这个属性，你可以利用这个属性完成很多事，比如在网页中编辑一个待办事项的清单。

1

<h6 contenteditable="true">Break mechanical cab<span>driver</span></h6>

7. 电子邮件输入框

HMTL5中新增了一个输入框的电子邮件属性，可以检测输入的内容是否符合电子邮件的书写格式，功能越来越强大了吧，在HTML5之前只能依靠JS来检测。虽然内置的表单验证功能很快就会成为现实，但这个属性很多浏览器都还不支持，只会当作普通的文本输入框来处理。

1
2
3
4
5

<form method="get">
  <label for="email">Email:</label>
<input id="email" name="email" type="email" />
  <button> Submit Form </button>
</form>

到目前为止，包括现代浏览器在内都不支持该属性，所以这个属性暂时还是靠不住的。

8. 占位符

文本框中的占位符(看看本博的搜索框效果)有利于提升用户体验，之前，我们只能依靠JS来实现占位符的效果，在HTML5中新增了占位符属性placeholder。

1

<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />

同样，目前的主流现代浏览器对该属性的支持不大好，暂时只有Chrome和Safari支持该属性，Firefox和Opera不支持该属性。

9. 本地存储

HTML5的本地存储功能，可以让现代浏览器”记住”我们输入的，就算浏览器关闭和刷新也不会受影响。虽然这个功能有些浏览器不支持，但是IE8, Safari 4, 还有 Firefox 3.5还是支持这个功能的，你可以测试下。

10. 更有语义的header和footer

下面的代码在HTML5中将不复存在

1
2
3
4
5
6

<div id="header">
     ...
</div>
<div id="footer">
     ...
</div>

通常我们都会给header和footer定义一个div，然后再添加一个id，但是在HTML5中可以直接使用<header>和<footer>标签，所以可以将上面的代码改写成：

1
2
3
4
5
6

<header>
    ...
</header>
<footer>
    ...
</footer>

要注意不要将这两个标签和网站的头部和页脚混淆起来，它们只是代表它们的容器。

11. IE对HTML5的支持

IE浏览器目前对HTML5的支持并不好，也是阻碍HTML5的更快普及的一大绊脚石，不过，IE9对HTML5的支持度还是很不错的。

IE把HTML5新增的标签都解析成内联元素，而实际上它们是块级元素，所以有必要为它们定义一个样式：

1
2
3

 header, footer, article, section, nav, menu, hgroup {
    display: block;
 }

尽管如此，IE还是不能解析这些新增的HTML5标签，这个时候就需要借助Javascript来解决这个问题：

1
2
3
4
5
6

 document.createElement("article");
 document.createElement("footer");
 document.createElement("header");
 document.createElement("hgroup");
 document.createElement("nav");
 document.createElement("menu");

你可以借助这一段Javascript代码来修复IE更好的解析HTML5

1
2
3

<!--[if IE]>
 <script mce_src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->

12. 标题群( hgroup)

这个类似于第二点技巧。如果用h1和h2标签分别表示网站的名称和副标题，但这会让两个本义上密切相关的标题并没有关联起来。这个时候可以使用<hgroup>标签将它们组合起来，这样代码会更有语义。

1
2
3
4
5
6

<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>

13. 必填项属性

前端人员肯定做过不少表单验证的项目，其中很重要的一点就是有些输入框的内容是必须填写的，这里就需要使用Javascript来检查。在HTML5中，新增了一个”必须填写”的属性：required。required属性有两种使用方法，第二种方法显得更有结构性，而第一种更简洁。

1

<input type="text" name="someInput" required>

1

<input type="text" name="someInput" required="required">

有了这个属性，使表单的提交验证变得更简单了，看看下面简单的例子：

1
2
3
4
5

<form method="post">
    <label for="someInput"> Your Name: </label>
<input id="someInput" name="someInput" type="text" placeholder="Douglas Quaid" required="required" />
    <button>Go</button>
</form>

如果输入框为空，表单将无法提交成功。

14. 自动获取焦点

同样的，HTML5也不再需要Javascript来解决输入框的自动获取焦点，如果某个输入框应当被选择或是获取到输入焦点，HTML5新增了自动获取焦点属性autofocus：

1

<input type="text" name="someInput" placeholder="Douglas Quaid" required="required" autofocus="autofocus" />

autofocus也同样可以写成”autofocus=autofocus”，这样看起来标准些，这个根据自己的个人喜好而定。

15. 音频播放的支持

HTML5中提供了<audio>标签，解决了以往必须依靠第三方插件才能播放音频文件的问题。目前为止，还只有少数的最新浏览器支持该标签。

1
2
3
4
5

<audio autoplay="autoplay" controls="controls">
    <source src="file.ogg" />
    <source src="file.mp3" />
    <a href="file.mp3">Download this file.</a>
</audio>

为什么会有两种格式的音频文件？因为Firefox和Webkit浏览器所支持的格式存在差异，Firefox只能支持.ogg文件，而Webkit只支持.mp3的文件，解决的办法就是创建两个版本的音频文件，这样就可以兼容Firefox和Webkit的浏览器了，需要注意的是IE不支持该标签。

16. 视频播放的支持

和<audio>标签一样，HTML5也提供了<video>标签对播放视频文件的支持。YouTube也宣布了一项新的HTML5的视频嵌入。不过有点遗憾，HTML5的规范并没有指定特定的视频解码器，而是让浏览器自己来决定。这就造成了个浏览器的兼容问题，虽然Safari和IE9都支持还H.264格式的视频( Flash 播放器可以可以播放)，Firefox和Opera则支持开源的Theora和Vorbis格式。因此，当显示HTML5视频的时候，也得准备2种格式。

1
2
3
4
5
6

<video controls preload>
    <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
    <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />  
<div> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </div>
 
</video>

需要注意的是，type属性虽然可以省略掉，但是如果加上的话，浏览器就可以更快的准确的解析该视频文件。并不是所有的浏览器都支持HTML5的视频，所以得做好使用Flash版本来代替，当然，这个决定权在于你。

17. 预加载视频

预加载属性：preload，首先要确定是否需要预先加载视频，假如，访客在访问一个有很多视频展示的页面，那么就有必要预先加载一段视频，这样可以节省访客的等待时间，提高用户体验。你可以给<video>标签添加一个preload属性来实现预先加载的功能。

1
2
3

  <video preload="preload">
  ...
 </video>

18. 显示控件 显示控件属性可以给视频添加一个播放暂停的控件，需要注意的是每个浏览器显示的效果可能会有些差异。

1
2
3

  <video preload="preload" controls="controls">
  ...
  </video>

19. 使用正则表达式

在HTML5中，我们可以直接使用正则表达式。

1
2
3
4
5

<form action="" method="post">
    <label for="username">Create a Username: </label>  
<input type="text" name="username"  id="username"  placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus="autofocus" required="required" />
    <button type="submit">Go </button>
</form>

20. 检测浏览器对HTML5属性的支持

由于各浏览器对HTML5属性的支持度不同，这就造成了一些兼容问题。但是可以使用方法来检测该浏览器是否支持这些属性，上例中的代码如果要检测pattern属性是否被浏览器识别，可以使用Javascript代码来检测。

1

alert( 'pattern' in document.createElement('input') ) // boolean;

其实这是确定浏览器兼容常用的方法，jQuery库就经常使用这种方法。上面的代码中创建了一个input标签，并检测pattern属性是否被浏览器支持，如果能支持的话，浏览器就支持这个功能，否则就不支持。

1
2
3
4
5

<script>  
 if (!'pattern' in document.createElement('input') ) {  
    // do client/server side validation  
 }  
</script>

21. Mark标签

<mark>标签用于高亮显示那些需要在视觉上向用户突出其重要性的文字，包裹在此标签里的字符串必须与用户当前的行为相关。例如，如果我在一些博客中搜索”Open your Mind” ，我可以使用在<mark>标签里使用JavaScript 来包裹每一次动作。

1
2

<h3> Search Results </h3>
<h6> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </h6>

22. 该如何正确的使用div标签

有些人可能会有疑问，有了<header>和<footer>等这些标签，<div>标签在HTML5中还有用吗？答案是肯定的，比如你想创建一个能包裹特殊内容的容器自由灵活的<div>肯定是首选，而你要创建一篇文章或者一个导航菜单，建议你使用更有语义的<article>和<nav>标签。

很多人认为HTML5可能还是很遥远的事，所以直接无视，其实不然，现在很多网站都已经开始使用HTML5了，事实上，HTML5的一些新增属性和功能是让代码变得更简洁，这总归是一件好事，应该值得我们推崇。最后感谢你阅读了这篇HTML5的入门级文章，希望能为你进一步学习HTML5提供一些帮助。

英文原文：25 html5 features tips and techniques you must know
翻译整理：雨夜带刀’s Blog
中文原文：http://stylechen.com/22-html5-tips.html

通常来说，CSS非常简单。但是当浏览器厂商开始实现CSS3特性，问题开始变得有些复杂了。不难，只是有些复杂。这可能包括两个方面：首先有些心得CSS3属性(比如，transition、渐变、transform等)不是那么简单，其次我们不得不使用浏览器厂商指定扩展。

直到你最喜欢用的IDE原生支持CSS3，你最好的伙伴将是CSS3生成器、手册、参考指南以及基于JS的方案。这正是本文要推荐的，这里将收集能够助你学习和使用CSS3的真正有用的工具。

生成器

• CSS3 Please!跨浏览器的CSS规则生成器，支持：border-radius、box-shadow、渐变(线性)、rgba色彩、transform (旋转)、transition和@font-face。
• CSS3 生成器支持border radius、box shadow、text shadow、RGBA、@font-face、多列、box resize、box sizing 和outline.
• CSS3 Sandbox有一些列的CSS3生成器：线性渐变、放射渐变、文字阴影、盒阴影、Transforms和文字描边。
• @font-face生成器来自于Font Squirrel的很好用的CSS3 @font-face 生成器。
• CSS3渐变生成器为Firefox和Webkit浏览器生成线性渐变。
• CSS 圆角生成用于Firefox、Webkit和标准CSS3语法的”border-radius”属性。
• Webkit CSS3 生成器简单的助你理解Webkit引入的CSS3特性。
• CSS3 学习工具动态为你的浏览器获取私有前缀并检测该属性是否被它支持。

JavaScript方案

• Modernizr一个确实很有用的JavaScript库，可以检测HTML5/CSS3的原生支持，并为你提供一种维护良好控制级别的方法，不管浏览器的能力。如果你更喜欢使用MooTools，你可以使用MooModernizr (MooTools 版本的Modernizr)
• Sizzle – JavaScript 选择器库一个纯Javascript选择器引擎，被设计用来方便的插入到一个主库中。Sizzle 实际上支持所有的CSS3 选择器——它甚至包括一些很不常用的选择器，比如忽略选择器(escaped selectors )(“.foo+bar”)、Unicode 选择器、以及在document序列中返回的结果。这也是jQuery使用的选择器引擎。
• YUI 选择器组件YUI CSS3 选择器组件，提供一个收集、过滤和测试HTML元素的稳定的简写方法。
• ie7-js一个让IE拥有兼容标准的浏览器一样的行为的JavaScript库。
• CSS3伪类选择器模拟ie-css3.js 可使Internet Explorer识别CSS3 伪类选择器并渲染任何使用它们定义的样式规则。简单滴在你的页面中引入这个脚本，然后在你的样式表中使用这些伪类选择器，然后IE就可以使用了。

参考指南

• CSS 3.0参考手册
  腾讯ISD WebTeam制作的一个CHM格式的参考手册，很全面，介绍+实例，推荐下载收藏；
• 我什么时候能用CSS3CSS3、HTML5、SVG以及其它即将可用的页面技术的浏览器兼容性列表；
• 浏览器支持清单使用Modernizr库检测你的浏览器支持的”高级”特性，包括CSS3特性和选择器的支持。
• CSS3选择器测试自动运行大量的判断你的浏览器是否支持一些CSS选择器的小测试；
• SelectORacle一个提供CSS2和CSS3选择器介绍的在线工具。简单的给它一些选择器，他就会返回选择器匹配的相关说明。
• CSS3手册与快速指南提供当前CSS3规范的列表，列出属性可用的值、常用的选择器模式参考，以type/单位组织，选择器类型参考和单位参考和信息(另有PDF 版本)；
• CSS3伪类SitePoint的CSS参考的相关部分内容；
• CSS3 速查手册CSS3属性、选择器类型以及可用的值的列表，PDF格式；

CSS3色彩名称 提供所有147种色彩的名字以及按照字母排序的值。

IE6对一些非常有用的css属性完全不支持。比如min-width，无人不抱怨IE6的css兼容性问题。本文介绍了10个很实用但IE6却不支持的CSS属性，列出这些属性并不是为了数落IE(数落也没用), 而是你了解了哪些CSS属性是IE6不支持的，就更有针对性的去编写CSS和Hack了。

一、Outline
在调试CSS问题的时候，我常常在指定元素上添加border来精确的查看该元素会发生什么并帮助确定问题的来源。这常常是有效的，因为它可以在布 局上给我更加具体的可视性。但是如果是块级元素，这可能会发生某些错误——在任何块级元素上添加1px的边框很可能会影响到布局，它会让这个元素的宽度额 外增加2px。
outline 属性是完美的替代者，因为它可以在不影响文档流的情况下呈现该对象。但是IE6 和IE7 不支持 outline 属性，所以，它不能在这两个浏览器中用于调试。

二、Inherit (值)
在CSS开发中有很多这样的例子：通过在特定元素上设置某些样式来告诉该元素来“继承”它父级元素的所有已添加的属性，这样你就可以避免相当多的键盘输入。
这可以通过设置 inherit 来很容易的实现。这可能很有用。比如，当重写 background 属性的时候，常常会有很多的文字在该属性中(色彩、图片的URL地址、位置等)。所以，与其重新写这些值，你可能仅仅想要考虑中的元素和其父级元素有相同 的背景属性，一个 inherit 值就可以搞定一切——这显然大大的节省了键盘输入。
不幸的是， inherit 值在IE6和IE7不被支持（除了用于 direction (文字方向) 和 visibility 属性）。
某人说，代码就像女人的裙子——越短越好，看来IE会阻碍我们这个愿望的实现。

三、Empty-Cells
该属性只用于table或者”display”属性被设置为”table-cell”的元素。如果你动态的为一个table添加内容，就可能会遇到某个单元格的内容为空的情况，然后你又不希望这个空的单元格的边框、背景色、背景图片等隐藏掉。
使用”empty-cells: hide”就能解决这个问题，它会将可能出现这种情况的单元格完全隐藏掉。
Internet Explorer 不支持empty-cells属性。

四、Caption-Side
说到table 的属性，这个属性用于声明显示在表格的侧栏的表格标题。它接受 top 、 bottom 、 left 和 right 四个值。Internet Exporer 不支持这个属性，table的标题在IE6和IE7中将总是出现在表格的顶部。

五、Counter-Increment / Counter-Reset
有序列表(<ol>)非常方便，因为它可以省去你手工添加递增数字的麻烦，而且它允许你不用更改数字就能改变列表的序列。
CSS 拥有 counter-increment 和 counter-reset 属性，它允许你用来自动生成递增数字到几乎所有的HTML元素上，就像有序列表的效果一样。
这里有个示例：

1
2

h2 {counter-increment: headers;}
h2:before {content: counter(headers) ". ";}

上面的样式将在所有的标签前面自动添加递增的数字，而且允许你在h2标签上实现和li标签同样的的效果。
但是IE6, IE7 甚至Safari(直到3.x版本)还不支持这些属性。当然，IE6也不支持:before 伪元素。

六、Min-Height
有时，一个网站的设计或布局结构需要一个有固定高度的内容区域，否则特定的视觉效果就会丢掉。这可能会因为一个渐变背景、一个独特的下拉列表、 或者可能是因为PS出来的很酷的发光效果。但是有的时候，页面中的内容会比较多，而页面却不能像预期那样展开。
这个时候就需要用到 min-height 属性了，因为它可以告诉浏览器在一个特定的块级元素上渲染最小的高度，不管内容的实际高度是否达到了这个最小高度。然后呢，如果内容超出了最小高度，该元素就会适度的扩展开。
使用min-height 唯一需要注意到的是它在IE6中不被支持。我们都知道IE6在（缓慢的）退出历史舞台，但是有的客户可能仍然要求他们的网站支持这个该死的浏览器。
不过令人高兴的是，IE6 渲染 height 的值的方法正好和其它浏览器渲染“min-height”的方式一样，所以你只需要一个针对IE6的hack或独立的样式表来为该元素添加特定的 height ，这个问题就解决了。
IE6 同样无视 min-width 、 max-height 和 max-width ， 但是上述方法在这些属性上也是可行的。

七、:hover
从技术上来说，:hover只是一个伪类，但是它在IE6中不被支持（IE7和IE8支持）。:hover伪类允许你在元素上添加任何的鼠标经过样式。这非常有用，可以避免(至少在某种程度上)使用JavaScript。
但是如果你的网站，需要完全支持IE6，特别是在中国这种IE6一手遮天的情况下，那么你就必须考虑取消使用这个伪类，除非相关的标签有个”href”属性，比如 “a” 标签。而且如果要实现这种效果，可能必须借助于javascript和额外的样式。

八、Display
Display 通常被设置为这三个值中的一个： block、inline和 none。“得益于”IE，Display的其它值很少被用到。这些值包括 inline-block、table、inline-table和table-cell等，这些属性对于解决一些特殊的布局问题时，是很有用的。
所以，尽管IE 确实支持Display的这三个基本属性，但是它基本上不支持其它属性。
其实，IE8对display的属性支持已经相当完整了。不过，对于inline-block属性，IE6/7只支持本身为inline的元素。

九. Clip
这是一个在特殊情况下能派上用场的很有趣的CSS属性。它可能和不可预知的、动态生成的内容结合起来。简单来说，这个属性允许你在一个特定的元素上 指定隐藏区域——也可以理解为，在一个绝对定位的元素中，按照一定的设置来裁剪该元素的显示区域，超出该区域的内容会被隐藏掉。语法看起来像这样的：

1
2
3
4
5
6
7

div.clipped {
padding: 20px;
width: 400px;
height: 400px;
clip: rect(20px, 300px, 200px, 100px);
position: absolute;
}

修剪只能用于一个绝对定位的元素，而且只用使用矩形区域。括号内的数字划出的区域(200px*180px大小)为可见区域，该区域以外的内容不可见或者被剪切掉。
技术上来讲， clip 属性被IE支持，但是只支持无逗号的语法，比如

1
2
3
4
5
6
7

div.clipped {
padding: 20px;
width: 400px;
height: 400px;
clip: rect(20px 300px 200px 100px);
position: absolute;
}

上面的样式（rect后面括号里的属性没有用逗号隔开）在大多数浏览器下都可运行，但是可能不会通过CSS验证，因为语句没有用逗号隔开。

十、:focus
这是另外一个伪类需要在这里被提及的，因为所有的非IE浏览器，都支持这个属性。:focus伪类允许你声明一个特别的样式，当一个页面元素成为键 盘(鼠标)焦点的时候，将该样式动态的应用到该元素上。这在表单元素上非常有用，因为你可以在一个输入框被选中的时候给它添加一个边框。
下面的样式将在输入框成为键盘焦点的时候添加一个红色的边框：

1
2
3

input:focus {
border: 1px solid #f00;
}

原文：http://www.div-css.net/div_CSS/topic/index.asp?id=6840

翻页、滑动、lightbox – serialcut.com

滑动、导航 – tearoundapp.com

滑动、导航 – mtvsticky.com

滑动、动画 – worldofmerix.com

滑动、拖拽 – icondock.com

滑动、导航 – directdesign.it

翻页、弹出 – jumpstartforbusiness.co.uk

滑动, Lightbox – 10bestthings.com

滑动 – paramoreredd.com

滑动 – bulletpr.co.uk

滑动、淡出、Ajax、导航 – bestbefore.ro

lightbox、Ajax – www.geochirp.com

滑动、导航 – eyedraw.eu

LightBox、Ajax、拖拽 – rachelbloch.ch

滑动、动画 – marfil.me

动画、提示 – jquerystyle.com

弹出、Ajax、提示 – virtuousquare.fr

滑动、动画 – bonadiesarchitect.com

滑动、热键 – pauljnoble.com

翻页、滑动、lightbox – ormanclark.com

提示、lightbox – tedxbucharest.com

来源：前端观察 http://www.qianduan.net/20-more-beautiful-interactive-website-design-using-jquery.html

jQuery Lightbox Plugin

支持的媒体类型： Images

演示

下载

Fancybox

支持的媒体类型： Images, Inline HTML, iFrame

演示

下载

Shadowbox

支持的媒体类型： Images, Inline HTML, iFrame, AJAX, Flash, Video

演示

下载

ThickBox

支持的媒体类型： Images, Inline HTML, iFrame, AJAX

演示

下载

Slightly Thickerbox

支持的媒体类型： Images, AJAX, Video

演示

下载

Fancy Zoom

支持的媒体类型： Images, Inline HTML, Flash

演示

下载

Facebox

支持的媒体类型： Images, Inline HTML, AJAX

演示

下载

nyroModal

支持的媒体类型： Images, Inline HTML, iFrame, AJAX, Video

演示

下载

Interface Imagebox Demo

支持的媒体类型： Images

演示

下载

piroBox

支持的媒体类型： Images

演示

下载

Greybox Redux

支持的媒体类型： Images, iFrame

演示

下载

prettyPhoto

支持的媒体类型： Images

演示

下载

—————————————————————————————

原文：10个最佳jQuery Lightbox效果插件收集
译自：Rounding Up the Top 10 jQuery Lightbox Scripts

1. jFlow

官方网站 | 演示

一个漂亮而整洁的图片幻灯，被nettut推荐，如果你想自己做一个图片幻灯效果，就去看看吧。

2. 使用jQuery UI实现推荐内容的幻灯展示

官方网站 演示

这是一个教你如何“使用一种很有冲击力的方法展示你的网站/博客的最佳内容以吸引更多眼球”的很不错的教程。该文章介绍展示推荐内容的技术中的一个是自动播放内容幻灯。

3. 创建漂亮的jQuery幻灯教程

官方网站 | 演示

该教程介绍如何开发/创建漂亮的使用图片描述和名称的jQuery幻灯。

4. 基于jQuery的一个简单的内容幻灯效果

官方网站 | 演示

Brenelz的网站开发技巧的一个简单的内容幻灯效果。

5. JC Play List

官方网站 | 演示

免费而好用的使用Flash组件创建的一个jQuery幻灯插件，特别是对XML、RSS2.0、Picasa和Flickr等多媒体列表等非常方便。

6. Easy Slider

官方网站 | 演示

一个JQuery插件，允许图片或任何内容在点击的时候水平/垂直滑动。

7.jqGalScroll

官方网站

jQuery Gallery Scroller (jqGalScroll)使用图片列表，并创建一个光滑的可以垂直、水平或对角滚动的图片相册。该插件同样能创建分页，从而你就可以轻松的浏览你的照片了。

8. Image Gallery

官方网站

这个一点儿都不复杂——它是一个非常简单的图片画廊/查看器。你可以像这样调用图片:

9.使用jQuery UI 制作内容幻灯

官方网站 | 演示

Dan Wellman为NetTuts写的教程，很详细。

10. 创建一个自动播放的推荐内容幻灯

官方网站 | 演示

来自CSS-Tricks的Chris Coyier 写的一篇教程。该脚本基于Coda Slider。它包含一些扩展的特性：

11. slideViewer

官方网站

SlideViewer是一个轻量的(1.5Kb)jQuery插件，它可以让你随时通过编写几行HTML代码来创建一个图片画廊.

12. Start/Stop Slider

官方网站 | 演示

13. 一个简约的jQuery插件

官方网站 | 演示

WebDesignBooth的一个教程，介绍如何使用强大的jQuery库创建简单的内容幻灯效果。

14. BarackSlideshow

官方网站 | 演示

一个灰常小巧和轻量的幻灯脚本，灵感来自于美国总统Baracka Obama网站的一个幻灯效果。该脚本获取MorphList的能力，并增强图片的可视化和导航。

15. 使用JQuery s3Slider的wordpress模板

官方网站 | 演示

在WP中使用JQuery s3Slider插件来创建幻灯内容。

其实，jQuery的幻灯插件并不只这些，还有CodaSlider、JQuery Cycle Plugin等，当然有些只只能用在图片的，而大部分是可用于内容的。

原文：15个最佳jQuery幻灯插件和教程
译自： 15 Best Examples of Free jQuery Content Sliders