最小宽度同样不被ie6支持，js解决方案如下：
////直接操作需要的元素
var container = document.getElementById('container');
container.style.width = (container.clientWidth < width) ? "500px" : "auto";
//定义函数，多次调用
function setMinWidth(elementId, width){
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth < width) ? width + "px" : "auto";
}
//调用函数
setMinWidth('container1', 200);
setMinWidth('container2', 500);最大宽度同样不被ie6支持，js解决方案如下：
//直接操作需要的元素
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
//定义函数，多次调用
function setMaxWidth(elementId, width){
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
}
//调用函数
setMaxWidth('container1', 200);
setMaxWidth('container2', 500);
在iPhone、iPad上测试最近项目，要让页面自适应缩放，使其适合设备屏幕。在GG上找的都介绍使用<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">，但在我的项目中并没有产生任何的作用，后来只好在GG中搜索，终于找到一个js的代码，多次使用都能Ok。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
document.addEventListener('touchstart', function () {
viewportmeta.content = 'viewportmeta.content = width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
document.addEventListener('orientationchange', function () {
viewportmeta.content = 'viewportmeta.content = width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
}, false);
}
}
});
</script>
这种方法需要调用jQuery库，不知道从事移动端开发的朋友，有没有更好的方法分享。
有时候大家想让你的用户无法直接从页面中copy你的内容，做起来好麻烦的，CSS3的“user-select”帮你实现这样的效果，请看一段简单的代码：
.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
jQuery制作遮罩层的代码片段
$('<div id="overlay"></div>')
.css({
position : 'fixed',
top : 0,
left : 0,
right : 0,
bottom : 0,
opacity : 0.6,
background : 'black',
display : 'none'
})
.appendTo('body')
.fadeIn('normal')
.click(function () {
$(this).fadeOut('normal', function () {
$(this).remove();
})
});
本来写这篇文章，我可以有很多废话，但是很多都过去了，言而总之下：我暂且给这个方法起个名字，叫做“为之法”，因为有了这篇文章，很多人的想法会豁然开朗，那样有了个名字交流传阅起来就方便多了。
本方法依托于editplus的自动完成，相信有一部分人还是玩过这个编辑器的，也知道里面有个叫做自动完成的东西，也许还正在使用呢，但是也有不知道的，可大家都是知道代码片段的，这个东西很好，ctrl+c，ctrl+v就可以了，很方便。现在有了这个editplus的自动完成，那个ctrl+c和ctrl+v应该是可以退休了。
好了，我们先说下用editplus来编写html。
大概在一年半前吧，突然在一个外国的网站上发现了zen coding这个好东西，那个时候支持的编辑器还不是很全，而这个notepad++轻量级的编辑器刚好支持，于是大漠写了notepad++结合Zen Coding快速编写HTML代码，而现在最新版的editplus已经内置了zen coding，也就是说如果你仅仅是notepad++用来编写html，那么可以考虑用editplus来替换了notedpad++了，因为editplus还能给你更大的功能-自动完成。（ps：notepad++在编写utf-8文件的时候会自动加上签名文档，也就是说它的utf-8的模式其实是utf-8 +BOM，这会引起问题的，不知道现在的最新版有没有去掉。），如果你需要经常编写html，到现在还不知道zen coding的话，那么可以先补习补习了。
好了，我们正式开始简单说下editplus里面自动完成的一些规则。
打开editplus的安装文件，会找到类似以acp结尾的文件，它就是传说中的自动完成文件，它让editplus可以扩展你自己的配置的自动完成文件。acp文件有四个规则，一个是以#TITLE开头的表示声明，如#TITLE=CSS就表示是css的自动完成文件，同理也可以定义html等文件的自动完成；第二个是以#T开头的表示简写，后面紧跟所表示的全部代码；第三个就是分号;代表注释；第四个是^!表示指针位置。下面以一小段html5的自动完成示例
#TITLE=HTML
; EditPlus HTML Auto-Complete File V1.0 - July 2012.
; Written By marvin, http://www.w3cplus.com
#T=#html
<!DOCTYPE html>
<html lang="en">
<head>
<title>^!</title>
<meta charset="UTF-8" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
</body>
</html>
#
; Head Elements.
#T=#js
<script src="^!"></script>
#T=#css
<link rel="stylesheet" href="^!" />
#上面就是从html5.acp中截取的一部分，上面说的四个规则在这里对应上。如果按照这个自动完成，我们如果需要输出<script src="^!"></script>那么只需要输入#js加上空格，就会出来这行，且光标在src的引号里面。当然这些简单的zen coding也许比这个更方便，我们可以用zen coding来完成啊，editplus的zen coding命令和notepad++一样，所以完全可以参考上面那篇notepad++结合zen coding。
现在才是我们editplus的王道，你可以利用自己以前归纳总结的知识来自定义你自己的自动完成，这才能体现自动完成的价值。下面我先从几个方面说下我最近悟出来的一点经验以供参考。
第一个应用是文档申明的时候区分浏览器，使用的是html4，对于不支持的css3的ie6-8都加上了no-css3这个class，对于ie6-7有了lte7，对于小于等于ie6的有lte6，且对每个版本有一个自己的class，以后再引入一个ie.css再根据各个浏览器来使用渐进增强。
#T=#html2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!--[if !IE]><!--><html xmlns="http://www.w3.org/1999/xhtml"><!--<![endif]--> <!--[if gte IE 9]><html class="ie9" xmlns="http://www.w3.org/1999/xhtml"><![endif]--> <!--[if IE 8]><html class="ie8 no-css3" xmlns="http://www.w3.org/1999/xhtml"><![endif]--> <!--[if IE 7]><html class="ie7 lte7 no-css3" xmlns="http://www.w3.org/1999/xhtml"><![endif]--> <!--[if lte IE 6]><html class="ie6 lte6 no-css3" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
这样我html文件中直接输入#html2加空格就会出现我得这个文档申明，不用去ctrl+c，ctrl+v，也不用去到处找在哪里用过这个东西。
第二个是布局方面的应用，布局分为有无边栏，左边栏还是右边栏，下面以有左右边栏为例，layout表示布局，l表示左边栏，r表示右边栏
#T=#layoutlr
<div class="page aside-two">
<div class="wrap-header">
<div id="header" class="clearfix">
<div class="inner"></div>
</div>
</div><!--wrap-header-->
<div class="wrap-container">
<div id="container" class="clearfix">
<div id="aside_left" class="aside">
<div class="inner"></div>
</div><!--aside_left-->
<div id="main">
<div class="inner"></div>
</div><!--main-->
<div id="aside_right" class="aside">
<div class="inner"></div>
</div><!--aside_right-->
</div>
</div><!--wrap-container-->
<div class="wrap-footer">
<div id="footer" class="clearfix">
<div class="inner"></div>
</div>
</div><!--wrap-footer-->
</div>同理我在html文件中输入#layoutlr加空格就会出现我需要的这个左右边栏的布局，无需寻拷贝复制
第三个是一些基本的结构方面的应用，如分页，选项卡，区块，新闻列表，图片列表，图文混排等，以用户头像列表为例
#T=#avatar
<ul class="clearfix inline-style user-avatar">
<li>
<a href="#">
<img alt="username" src="images/img50.jpg">
<strong></strong>
</a>
</li>
</ul>既然是自定义的，肯定里面含有一些你经常用的东西，如这里的ul的class就是按照我的规则来定义的，图片的大小也是我自己的方式img50表示图片大小为50px*50px，strong里面放的是用户名，之所以只有一个li，是因为可以按照需求修改，以后的可以按照第一个拷贝。这里在html文件输入#avatar加空格就会得到下面这些代码片段。
第四个是对于form的表单元素的应用，曾经写过一个css解决方案，然后里面有个关于form表单元素的总结，于是在一段时间内我只是拷贝复制里面的需要的东西，然后有一天顿悟，拷贝复制都太浪费时间了，于是有了这个突破。下面以一个登录表单及一个input：text为例
#T=#flogin <form method="post" action="#" class="form-horizontal" id="login_form"> <div class="form-item"> <label for="username">用户名：</label> <div class="form-field"><input type="text" class="form-text" id="username" name="username"></div> </div> <div class="form-item"> <label for="pwd">密码：</label> <div class="form-field"><input type="password" class="form-text" id="pwd" name="pwd"></div> </div> <div class="form-item item-no-label form-radio-checkbox-wrap"> <div class="form-field"> <label><input type="checkbox" name="" class="form-checkbox" value="1" checked="checked"><span>下次自动登录</span></label><a class="forget-pwd" href="#">忘记密码？</a> </div> </div> <div class="form-action"> <span class="submit-wrap greybtn"><input type="submit" class="submit-btn" value="提交"></span> </div> </form> #T=#ftext <div class="form-item"> <label for="username">用户名：</label> <div class="form-field"><input type="text" class="form-text" id="username" name="username"></div> </div>
第五个方面的应用是替换文字及图片方面的应用，以一段placeholder文字及图片为例（文字来自《劝学》）,以p开头，sp表示短文本，生成图片的那个地址只需修改后面的两个数字（第一个为宽，第二个为高，400表示宽，200表示高）就可以得到你需要尺寸的图片，所以以后如果需要一些替换的图片，根本不需要你从psd里面去整一个下来，直接在这里输入地址就得到一个了
#T=#psp <p>故不积跬步无以至千里</p> ^! #T=#pimg <img src="http://lorempixel.com/400/200/" alt="" />
当然还有一些其他零散的应用，你也可以挖掘出更多属于你自己的自动完成。html自动完成部分献丑到此，css部分继续
css方面第一个自动完成，那非基本属性莫属了，反正css基本属性就那么多。以一小部分属性为例
#T=bc
border:1px solid #ccc;^!
#T=fl
float:left;^!
#T=pre
position:relative;^!
#T=bg
background:url('../images/^!') no-repeat;其实很长时间，我对editplus的自动完成理解仅限于此，就是这些简单的基本属性，是故我用editplus差不多两年，其中有大概一年多就是会使用这些简单的属性自动完成，更谈不上上面那些html的一些了，所以以前用editplus仅仅是用来写css的，所幸在我最苦闷无解的时候神给我开启了那扇虚掩的门，于是有了下面这些css扩展方面的自动完成及上面的html方面的自动完成。
第二个方面当然非兼容莫属了，以简单常用的几个为例
#T=frd float:right; display:inline;^! #T=minh min-height:^!px; height:auto !important; height:^!px; #T=dib display:inline-block;*display:inline;*zoom:1;^!
在css文件中输入frd就会出现兼容ie6双倍margin的display:inline，还有最小高度及inline-block等
第三个方面那就是我们伟大的css3了，这么轰轰烈烈的css3最令人愤怒的莫过于对于各个浏览器的前缀问题了。以transition及transform为例
#T=transition -webkit-transition:^!; -moz-transition:^! -ms-transition:^! -o-transition:^! transition:^! #T=transform -webkit-transform:^!; -moz-transform:^! -ms-transform:^! -o-transform:^! transform:^! #T=scale -webkit-transform:scale(^!); -moz-transform: -ms-transform: -o-transform: transform: #T=rotate -webkit-transform:rotate(^!); -moz-transform:^! -ms-transform:^! -o-transform:^! transform:^!
这样各个浏览器的兼容都有了吧，放心大胆的使用吧，还不用担心少了某个浏览器
第四个方面的应用就轮到我们的代码片段了，如我们常用的reset，我们可以定义下来，然后直接输入reset加空格就可以搞定了，无需找寻拷贝，就这么简单。除了reset我们还可以根据前面html东西，先预定义css，如分页，选项卡，按钮，form，图文混排等等,以前面html的用户列表为例
#T=avatar
/* user img list user'avatar */
.user-avatar img{
width:50px;
height:50px;
padding:2px;
background-color:#fff;
border:1px solid #ccc;
vertical-align:middle;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
.user-avatar li{
width:56px;
}
.user-avatar a{
display:block;
float:left;
width:56px;
}
.user-avatar a strong{
display:block;
width:56px;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
height: 20px;
line-height:20px;
font-weight:normal;
}第五个方面的应用可以定义我们的学习参考资料，以r开头表示reference，以本站的css3学习资料为例
#T=rcss3 http://www.w3cplus.com/resources/css3-tutorial-and-case
至此，html&css两个自动完成相互辉映，浑然一体，大功告成。
当然既然是自定义的自动完成，对于每个人来说，都有自己的使用习惯及一些代码结构，所以绝不仅限于此，小弟在此抛砖引玉，希望有更多高含金量的可以建议分享下。
ps：建议初学者及功力不足者勿用，一定的量变才能完成质变。不然根正不足，易走火入魔。
这里所说的元素在屏幕中水平垂直居中，指的是某个元素显示在浏览器或者显示设备的正中间，有点类似于Popup的效果。
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
//Use the above function as:
$(element).center();
大家可以在这个代码基础上进行修改，让元素在其父元素中水平垂直居中。或者说在其容器中水平垂直居中。当然这种效果也可以使用CSS来实现：
另外还有一些其他的实现方法
< !-- html -->
<div id="outer">
<div id="middle">
<div id="inner">
any text <br>
<b>any height </b><br>
any content, for example generated from DB <br>
everything is vertically centered <br>
</div>
</div>
</div>
< !-- CSS -->
html{height: 100%;}
body {height: 100%;}
#outer {height: 600px; overflow: visible;width: 100%;position: relative;} /* or without overflow */
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;position:static;}
#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
其实还有其他更好的方法，比如前面几篇文章介绍到的各种方法，每种方法各有自己的利弊，使用时自己考虑。
转载烦请注明出处：http://www.w3cplus.com/codes/center-element-screen-jquery.html
多边框效果，大家常见的应该是双线边框效果，使用页面部分元素具有层次的效果。在CSS2中依靠的是背景图片或者借助相邻两个元素的border来实现。而现在CSS3中的box-shadow可以直接在一个元素中完成，我们来看一个简单的片段：
<!-- HTML -->
<div id="box"></div>
<!-- CSS -- >
body {
background: #39275B;
}
#box {
width: 100px;
height: 100px;
margin: 50px auto;
border: 1px solid #1E1530;
box-shadow:-1px 0 0px #4E3A73,1px 0 0 #4e3a73,0 1px 0 #4e3a73,0 -1px 0 #4e3a73;
}
效果如下：
制作这种效果方法还有很多，同时box-shadow制作多边框的运用与还有其他的，我们再来看一个
#box {
width: 200px;
height: 150px;
margin: 50px auto;
box-shadow:
0 0 0 2px #000,
0 0 0 3px #999,
0 0 0 9px #fa0,
0 0 0 10px #666,
0 0 0 16px #fd0,
0 0 0 18px #000;
}
上面完全是通过box-shadow制作了一个六色边框效果的案例：
使用这种方法是不是很方便呀，这仅是box-shadow实现多边框的方法，我们还可以使用别的CSS3属性来实现，比如说border-color、::before等，我们将在近期整理有关于制作多边框效果的各种方法，感兴趣的同学可以观注本站的相关更新。
如需转载烦请注明出处：http://www.w3cplus.com/codes/css3-multiple-borders.html
//如果变量存在，是一个字符串，并且其长度大于0，结果为真
if(((typeof unkownVariable != "undefined") && (typeof unkownVariable.valueOf() == "string")) && (unkownVariable.length > 0)){
}给页面换肤的效果有不少同学做过，今天在逛blog时也发现一段使用jQuery换肤的代码，贴上与大家分享，希望有需要的同学有所帮助，更希望高手指点：
$(document).ready(function(){
$('#styleSwitch .button').bind('click', function(){
$('body').removeClass();//remove all the other classes
$('#styleSwitch .button').removeClass('selected');
$(this).addClass('selected');
switch(this.id){
case 'style1':
$('body').addClass('style1');
break;
case 'style2':
$('body').addClass('style2');
break;
case 'style3':
$('body').addClass('style3');
break;
}
return false;
});
});
本站有关于CSS3的Media Queries的相关教程有不少，说直一点，就是使用Media Queries来制作Responsiv Desgin。现在国外流行的一种设计叫Responsive Design(国内称为响应式设计)，其中这种布局关键之处就是不能少了Media Queries的配合，早在《CSS3 Media Queries模板》一文中就给大家介绍了常用的模板，但有很多评论和论坛中说使用px为单位写响应式布局，会造成断点，那么今天给大家贴上一段使用“em”为单位的Media Queries模板代码片段：
/* ===== == = === 20em (320px) === = == ===== */
@media only screen and (min-width : 20em) {
}
/* ===== == = === 30em (480px) === = == ===== */
@media only screen and (min-width : 30em) {
}
/* ===== == = === 37.5em (600px) === = == ===== */
@media only screen and (min-width: 37.5em) {
}
/* ===== == = === 48em (768px) === = == ===== */
@media only screen and (min-width : 48em) {
}
/* ===== == = === 56.25em (900px) === = == ===== */
@media only screen and (min-width : 56.25em) {
}
/* ===== == = === 68.75em (1100px) === = == ===== */
@media only screen and (min-width : 68.75em) {
}
/* ===== == = === 81.25em (1300px) === = == ===== */
@media only screen and (min-width : 81.25em) {
}
同时附上本站有关于Media Queries和Responsive Design的相关教程：
如需转载，烦请注明出处：http://www.w3cplus.com/codes/Media-Queries-Using-EMs.html
HTML有许多特殊的字符，您对此有多少了解？平时在WEB制作中，您又有用到多少？或者说你在平时使用之时，是否也会碰到，有许多特殊字符要如何打印出来？比如说“笑脸”，比如说“版权号”。要是你用时忘记了这些特殊字符，不要紧，请记住今天这个地址，你就随时可以查到这些特殊字符的表示方法。
简单的介绍一下其使用方法：
1、这些字符属于unicode字符集，你的文档需要声明为"utf-8"
2、列表符号后面有两列编号，第一列编号用于HTML文档中，需要在编号前面加上“&#”符号，比如说“向左箭头”符号对应的HTML编号是：“8672”，那么在文档中需要写成“⇠”;第二列编号用于CSS文档中，需要在编号前面加上反斜杠“\”进行转义，比如说“向左箭头”符号对应的CSS编号是：“21E0”,那么在文档中需要写成“\21E0”;同时第二列也可以用于JavaScript文档中，需要在编号前面加上“\u”来进行转义，比如说“向左箭头”符号，在JavaScript文档中，我们就要写成“\u21E0”.
使用的方法很简单，但要用好，我们还是需要注意一些细节上的要求：
1、有的字符在不同的浏览器下表现不太一样，比如“小雪人”在Firefox和Chrome下不太一样；
2、有的字符在某个浏览器下不会显示；
3、为了不造成损失，使用字符编码来代替某些符号时，请注意各个浏览器进行测试；
4、移动端对此支持度较差，特别是在Window phone下和UC浏览下器，直接无法显示。
基于上面几个不足之处，大家在使用过程请考虑周详，详细的列表请看：
如需转载，烦请注明出处：http://www.w3cplus.com/resources/HTML-special-character-sheets.html
很早就想写这篇博文，但碍于时间的关系一直没有动工，今天趁着发布《CSS解决方案》的机会和大家聊聊。W3cplus在大家的支持和鼓励下，就快到两周岁了。回想起这两年来走过的路程，我感到很欣慰，在打理W3cplus过程中让我学到了很多东西，也让我认识了很多新老朋友，他们给了知识的源头，给我了学习的动力，给了我支持与鼓励，借此机会我感谢这些朋友，真的谢谢你们，因为有了你们才有了今天的我，在今后的日子里我会更加的努力。
W3cplus只是我的一个舞台，同时我更把他当作是我的一个孩子，我喜欢他，我也爱他，当然希望朋友们能像以前一样，继续爱他。现在的思绪很乱，我也不知道要写什么，或者要说什么。其实很多朋友都不知道W3cplus是怎么来的？说来也是自己的一种冲动，那时候就想做一个Blog，刚好机缘巧合工作中在使用Drupal,想想，就用Drupal来做一个blog吧，一是学习Drupal，一是建个站。更让我幸运的是，我认识了为之，因为我创建W3cplus的时候，一有问题就是缠着@为之，他也很细心得给我讲解，并且有时候给我详细的截图，告诉我第一步、第二步、第三步....要怎么的做，就这样W3cplus经过一个月的时间好了，上线了。
现在的W3cplus其时是第三版了，这回是由@为之设计与制作的主题， 我只是打了一下酱油，写了点样式，在此非常感谢@为之。同时也想告诉大家，现在的w3cplus不在是大漠一个人的了，从现在开始，@为之同学加入了W3cplus，为了当初的理想，我们在一起努力，争取打造一个优秀的前端网站，让更多的，更有需要的同学能学到自己想学的知识，更希望w3cplus能对您有所帮助，我们会朝着我们的目标不断的努力。将W3cplus打造为——“引领前端技术前沿，打造精品CSS3教程”。当然希望有着同样理想与志向的朋友加入我们的阵营，为了未来而努力。
接下来，要为大家介绍的是@为之写的一套《CSS解决方案》，这套方案他花费了很多心血，曾经也问过我，要不要放出来与大家分享，我说要，因为只有在分享的过程才能学到更好的，更多的知识。就这样，大家看到了这套《CSS解决方案》，我看过很多回，有很多知识是越看越有意思，今天我也把整套的方案发布在W3cplus上，当作@为之给大家的第一个礼物。下面几段话是引用为之写的：
或许你不知道我要表达什么，说实在的也自己都不知道我要表达什么？因为我不是一个文艺青年，我们还是来看实际的吧，或许你会更喜欢一些。
《CSS解决方案》，我们单独提成一个子站，大家可以点击进入其首页：
下面我简单的向大家介绍一下，现在《CSS解决方案》主要包含了以下内容：
我们还没有停止，我们在继续努力，希望有兴趣的同学一起参与进来。如果你有更好的建议或者想法，可以直接与我们联系，或者在下面的评论中给我们留言。
如需转载，烦请注明出处：http://www.w3cplus.com/resources/css-solution.html
W3cplus自改版以来，陆续为大家推荐了近四十款不同的jQuery的优秀插件，这些插件在平时的Web制作中所起的作用也是各式各样，同时也能帮不少同学解决项目中急需的功能效果。如果你对这些插件感兴趣的话，可以仔细阅读，当然你要是不喜欢jQuery插件，我也建议您花那么一顶点时间了解一下，因为里面有些插件的功能创意是非常有意思的。今天我要为大家继续推荐另外十款插件，希望大家喜欢，更希望对同学们的学习与工作有所帮助。
W3cplus在前面推出的四十款不同的jQuery插件，这些插件都是平时在逛blog时发现的，觉得有意思就摘录下来了，如果你还没有看到，但又对这些插件也感兴趣的话，就点击下面的链接吧：
iosSlider是一个可定制的、跨浏览器幻灯片jQuery插件。设计用于作为内容滑块、旋转木马、滚动网站旗帜,或者图片库。其效果类似于ios的横向滚屏效果。
这一款固定定位的插件，其兼容Firefox、Chrome、Safari、IE8+
简单的jQuery插件,可以360°拖动背景图片(圆柱投影)和其他无缝循环图。
Tiny Scrollbar可以用于制作滚动内容的滚动条。它是一个动态的轻量级工具jQuery插件。
DreamyLiteBox是另一款制作弹出窗口的插件。
Repo.js是一款轻量级的jQuery插件，他可以帮助你制作类似于github代码库展现形式的风格。
Gridster是一个jQuery插件,允许构建直观的拖拽布局元素跨越多个列。你甚至可以动态添加和删除元素网格。
HTML5 Sortable是一个jQuery插件,使用HTML5本地化拖放的API创建可排序列表和网格。
一款使用HTML5的canvas元素制作的jQuery插件，用来绘制百分比图形。
Holder.js是一款图片占位符的jQuery插件。
到这一期结束之时，我们总共给大家介绍了五十个优秀的jQuery插件，如果你是第一次看到这篇文章，那么你也可以继续点击：
查看其他四十个jQuery插件。同时希望这些插件对大家今后的工作或者应用有所帮助。我们会继续努力，下一期将为大家推荐一些更优秀的插件，如果你对这些插件感兴趣，请观注w3cplus的更新。
如需转载，烦请注明出处：http://www.w3cplus.com/source/best-jquery-plus-2012-part5.html
firefox浏览器从14.0.0升级后，css3会出现一些变化，导致一些原本正常运行的实例，突然变成乱起八糟的，很是揪心啊。
到目前为止，影响我的有两个，第一个是transform里面的skew属性，以前是可以这么写的-moz-transform:skew(10deg,5deg);10deg表示x轴方向，5deg表示y轴方向，现在从firefox14.0.0开始已经不可以了，得写成skewX或skewY，分别表示x轴，y轴。所以现在应该是这么写-moz-transform:skewX(10deg) skewY(5deg);
另一个的是关于行内元素的动画部分，你可以访问css解决方案的首页，右上角有片叶子形状的w3cplus，如果你用firebug加上display:inline-block；就会发现它原来是可以运动的，原先设计的时候本来就是可以运动的，只是火狐升级后，对于这个行内样式的动画不动了，而谷歌浏览器以前也没有运动的迹象，现在如果你加入display:inline-block；会发现原来也可以动，这个不清楚什么原因，难道是行内元素的动画有问题？望高手可以解释一二。
可能还会有其他的一些对css3支持的变化，我这边还不太清楚，如果你发现了，请留言交流，谢谢！
表单元素中的input类型为text和submit所用的盒子模型不是一样，现在这个问题可以用css3来解决，submit所用的盒子模型是border-box，而text所用的盒子模型是content-box。现在我们可以通过css3设置它们两个为同一个盒子模型，其语法为：
box-sizing: content-box | padding-box | border-box;
这样我们就可以设置submit和text都为content-box，那么解析盒子模型的时候就一样了
input[type='text'],input[type='submit']{
box-sizing:content-box;
}img:hover {
-webkit-transform: rotate( random(-5, 5)deg); // generate a random number between -5 and +5
-moz-transform: rotate( random(-5, 5)deg); // generate a random number between -5 and +5
}
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}
yahoo在线压缩图片：
http://www.smushit.com/ysmush.it/
配色方案
http://www.colorcombos.com/combolibrary.html
css3@font-face在线字体库及制作
http://www.fontsquirrel.com/fontface
google在线字体
http://www.google.com/webfonts
css3&html5支持情况
在线生成css3渐变背景
http://www.colorzilla.com/gradient-editor/
css3 drop shadow在线生成
http://www.wordpressthemeshock.com/css-drop-shadow/
在线压缩js
http://javascriptcompressor.com/
在线压缩css
http://www.css88.com/tool/csstidy/
在线生存按钮
http://super.hubspot.com/buttons/
在线条纹背景制作
jquery选择器测试
http://codylindley.com/jqueryselectors/
改变浏览器大小
在线制作表单
html转成string
http://www.html-js.com/my-js/version0.0.1/tool/html2string.html
常用js库获取
浏览器兼容性测试
获取分享按钮
占位图片在线生成