现代浏览器及ie8：
hr {
border : 0;
height : 15px;
background : url(hr.gif) 50% 0 no-repeat;
margin : 1em 0;
}
针对ie8以下：
hr {
display : list-item;
list-style : url(hr.gif) inside;
filter : alpha(opacity=0);
width : 0;
}
$("a[href^='http://']").click(function(){
this.target = "_blank";
});
或者使用下面这个
$(function(){
$("a[href^='http://']").attr({'target':'_blank'})
})
1、改变选中文字的背景和颜色
::selection{ /* Safari and Opera */
background:#c3effd;
color:#000;
}
::-moz-selection{ /* Firefox */
background:#c3effd;
color:#000;
}2、防止火狐滚动条跳动
html{ overflow-y:scroll; }3、分页打印
.page-break{ page-break-before:always; }4、使用!important
.page { background-color:blue !important; background-color:red;}5、图像替换文字
.header{
text-indent:-9999px;
background:url('someimage.jpg') no-repeat;
height: 100px; /*dimensions equal to image size*/
width:500px;
}6、兼容浏览器的最小高度
#container{
height:auto !important;/*all browsers except ie6 will respect the !important flag*/
min-height:500px;
height:500px;/*Should have the same value as the min height above*/
}
7、对新窗口打开得链接高亮显示
a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "\279C";
}
8、美化li序列号
ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}9、首字下沉
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:3.0em;
font-family:Georgia;
}10、兼容浏览器的opacity
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
} 11、使用line-height实现垂直居中
line-height:30px;
12、居中布局
body{
width:1000px;
margin:0 auto;
}13、移除ie文本域的垂直滚动条
textarea{
overflow:auto;
}14、移动超链接的虚线框
a:active, a:focus{ outline:none; }15、ie下元素消失，给该元素添加
position:relative;
16、根据链接不一样，添加不一样的icons
a[href$='.doc'] {
padding:0 20px 0 0;
background:transparent url(/graphics/icons/doc.gif) no-repeat center right;
}17、css手型点击样式
input[type=submit],label,select,.pointer { cursor:pointer; }18、字母大写
text-transform: capitalize;
19、所有英文大写，且首字母比其他的大
font-variant:small-caps;
20、高亮文本框，不支持ie
input[type=text]:focus, input[type=password]:focus{
border:2px solid #000;
}21、移除img边框
a img{ border:none; }22、用label实现无表格表单
p label{
width:100px;
float:left;
margin-right:10px;
text-align:right;
}转自：http://webdeveloperplus.com/css/25-incredibly-useful-css-tricks-you-should-know/
记得刚开始做css的时候，用ps切图，总得切的刚好的尺寸，生怕多了或是少了几个像素，这对拿捏的功夫要求就比较高了，甚至于切好了一用发现多了一个像 素，又得再切一下。其实大不必这么麻烦。如果多了点像素，一般都可以用背景定位技术来解决的，而少了一个像素那就必须重新切了。
如上部多了2px，我们定义背景的时候向上偏移2px，
url(images/yourimage_bg.gif) no-repeat 0 -2px;
如左部多了1px，则定义背景的时候向左偏移1px，
url(images/yourimage_bg.gif) no-repeat -1px 0;
当然我们要限制背景区域的大小，多出的就会显示出来了。
<div class="block"> <span style="font-weight: bold; color: red;">Hello World</span> </div>
众所周知，行内式最高级的， 如果我们要想使用导入式的来取代这个行内式的最高级，该如何写呢，用！important 如：
.block span{
font-weight: normal !important;
color: #000 !important;
}
这样这个class为block的div使用的css将不再是行内式的，而是我们设置的！important的，不过！important不支持ie6
前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格，其实我们可以反过来思路，使用“appearance”属性，来改变任何元素的浏览器默认风格，简单的说，你可以使用“appearance”属性将“段落p”渲染成button的风格，也可以渲染成“输入框”、“选择框”等效果。
大家都知道每个浏览器对HTML元素渲染都不一样，比如说“button”，在chrome和ff中，渲染出来的效果都是不尽相同的。这样一来就有了今天这个思路，利用浏览器的对元素的默认渲染风格，我们可以使用“appearance”属性对任何元素的渲染风格改变，最简单的来说，我要把“a”链接默认显示成“按钮”风格，那么我们可以使用“appearance”设置为“button”。
“appearance”功能听起来蛮大的，不过可惜的是，目前各个浏览器厂商各自为政，还无法达到统一的标准，至今天也只有两个内核的浏览器可以使用，其一是“webkit”，其二是“ff”的，也就是说在使用“appearances”时，需要加上各浏览器厂前缀。
appearance使用方法：
.elmClass{
-webkit-appearance: value;
-moz-appearance: value;
appearance: value;
}
接下来我们一起来看个简单的实例：
<p class="lookLikeAButton">我是一个段落P元素 </p> <p class="lookLikeAListbox">我是一个段落P元素 </p> <p class="lookLikeAListitem">我是一个段落P元素 </p> <p class="lookLikeASearchfield">我是一个段落P元素 </p> <p class="lookLikeATextarea">我是一个段落P元素 </p> <p class="lookLikeAMenulist">我是一个段落P元素</p>
接下来，使用“appearance”属性来改变上面“P”元素的风格：
/*看起来像个按钮，以按钮的风格渲染*/
.lookLikeAButton{
-webkit-appearance:button;
-moz-appearance:button;
}
/*看起来像个清单盒子，以listbox风格渲染*/
.lookLikeAListbox{
-webkit-appearance:listbox;
-moz-appearance:listbox;
}
/*看起来像个清单列表，以listitem风格渲染*/
.lookLikeAListitem{
-webkit-appearance:listitem;
-moz-appearance:listitem;
}
/*看起来像个搜索框，以searchfield风格渲染*/
.lookLikeASearchfield{
-webkit-appearance:searchfield;
-moz-appearance:searchfield;
}
/*看起来像个文本域，以textarea风格渲染*/
.lookLikeATextarea{
-webkit-appearance:textarea;
-moz-appearance:textarea;
}
/*看起来像个下接菜单，以menulist风格渲染*/
.lookLikeAMenulist{
-webkit-appearance:menulist;
-moz-appearance:menulist;
}
经过“appearance”的属性值设置后，段落P的默认风格就被改变了，如图所示：
当然上面的属性只是“appearance”中的一部分，我搜集了一下webkit和Mozilla下的appearance给大家参考：
Webkit下的appearance属性值
checkbox radio push-button square-button button button-bevel listbox listitem menulist menulist-button menulist-text menulist-textfield scrollbarbutton-up scrollbarbutton-down scrollbarbutton-left scrollbarbutton-right scrollbartrack-horizontal scrollbartrack-vertical scrollbarthumb-horizontal scrollbarthumb-vertical scrollbargripper-horizontal scrollbargripper-vertical slider-horizontal slider-vertical sliderthumb-horizontal sliderthumb-vertical caret searchfield searchfield-decoration searchfield-results-decoration searchfield-results-button searchfield-cancel-button textfield textarea
Mozilla下的appearance属性值
none button checkbox checkbox-container checkbox-small dialog listbox menuitem menulist menulist-button menulist-textfield menupopup progressbar radio radio-container radio-small resizer scrollbar scrollbarbutton-down scrollbarbutton-left scrollbarbutton-right scrollbarbutton-up scrollbartrack-horizontal scrollbartrack-vertical separator statusbar tab tab-left-edge Obsolete tabpanels textfield textfield-multiline toolbar toolbarbutton toolbox -moz-mac-unified-toolbar -moz-win-borderless-glass -moz-win-browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox tooltip treeheadercell treeheadersortarrow treeitem treetwisty treetwistyopen treeview window
大家要是感兴趣的话可以看看下面的相关介绍：
最后在提醒大家一回，目前在IE系列和Opera浏览器上不支持“appearance”，而且Safari也只有3.0版本以上支持，而在Chrome和Firefox以及移动设置浏览器上得到较好的支持。如果大家对此感兴趣，自己可以私下一个下个尝试上面的属性值，给大家带来何种效果。
如需转载，烦请注明出处：http://www.w3cplus.com/css3/changing-appearance-of-element-with-css3.html
calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。因为看其外表像个函数，既然是函数为何又出现在CSS中呢？这一点也让我百思不得其解，今天有一同事告诉我，说CSS3中有一个属性能实现自适应的布局，首先让我想到的是box-sizing，但跟我说还可以计算，这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍，但一直没有深入，也没有自己去测试过。今天花了一下午的时间彻底学习了一下calc()。于是就有了这篇blog，希望对大家有所帮助。
平时在制作页面的时候，总会碰到有的元素是100%的宽度。众所周知，如果元素宽度为100%时，其自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。比如说，有一个边框，或者说有margin和padding，这些都会让你的盒子撑破。我们换句话来说，如果你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任何一值，都将会把元素盒子撑破（标准模式下，除IE怪异模式）。这样一来就会相当的麻烦，平时我们碰到这样的现象时，也是相当的谨慎，有时甚至无法解决，只能通过改变结构来实现。就算你通过繁琐的方法实现了，但有于浏览器的兼容性而导致最终效果不一致。虽然前面介绍的CSS3属性中的box-sizing在一定程度上解决这样的问题，其实今天的calc()函数功能实现上面的效果来得更简单。
学习calc()之前，我们有必要先知道calc()是什么？只有知道了他是个什么东东？在实际运用中更好的使用他。
calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。
calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。
calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：
.elm {
width: calc(expression);
}
其中"expression"是一个表达式，用来计算长度的表达式。
calc()使用通用的数学运算规则，但是也提供更智能的功能：
浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。
大家在实际使用时，同样需要添加浏览器的前缀
.elm {
/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
calc();
}
通过上面的了解，大家对calc()不在那么陌生，但对于实际的运用可能还是不太了解，那么大家就接下来跟我一起动手，通过实例来了解他吧。首先我们来看一个最常用的实例：
<div class="demo"> <div class="box"></div> </div>
上面的结构很简单，就是一个div.demo的元素中包含了一个div.box的元素，接下来我们一步一步来看其中的变化。
第一步：添加普通样式：
.demo {
width: 300px;
background: #60f;
}
.box {
width: 100%;
background: #f60;
height: 50px;
}
此时的效果很简单，就是div.box完全遮盖了div.demo，如下图所示：
第二步，在div.box上添加border和padding
这一步很棘手的事情来了，在div.box上添加10px的内距padding，同时添加5px的border：
.demo {
width: 300px;
background: #60f;
}
.box {
width: 100%;
background: #f60;
height: 50px;
padding: 10px;
border: 5px solid green;
}
为了更好的说明问题，我在div.demo上添加了一个padding：3px 0;
.demo {
width: 300px;
background: #60f;
padding: 3px 0;
}
.box {
width: 100%;
background: #f60;
height: 50px;
padding: 10px;
border: 5px solid green;
}
这个时候大家不知道能否想到问题会发生在哪？其实很简单，这个时候div.box的宽度大于了其容器div.demo的总宽度，从而撑破容器伸出来了，如图所示：
第三步，calc()的运用
为了解决撑破容器的问题，以前我们只能去计算div.box的宽度，用容器宽度减去padding和border的值，但有时候，我们苦于不知道元素的总宽度，比如说是自适应的布局，只知道一个百分值，但其他的值又是px之类的值，这就是难点，死卡住了。随着CSS3的出现，其中利用box-sizing来改变元素的盒模型类型实使实现效果，但今天我们学习的calc()方法更是方便。
知道总宽度是100%，在这个基础上减去boder的宽度（5px * 2 = 10px）,在减去padding的宽度（10px * 2 = 20px），即"100% - (10px + 5px) * 2 = 30px" ，最终得到的值就是div.box的width值：
.demo {
width: 300px;
background: #60f;
padding: 3px 0;
}
.box {
background: #f60;
height: 50px;
padding: 10px;
border: 5px solid green;
width: 90%;/*写给不支持calc()的浏览器*/
width:-moz-calc(100% - (10px + 5px) * 2);
width:-webkit-calc(100% - (10px + 5px) * 2);
width: calc(100% - (10px + 5px) * 2);
}
这样一来，通过calc()计算后，div.box不在会超出其容器div.demo的宽度，如图所示：
上面是一个简单的实例，接下来我们一起来看一个自适应布局的例子：
上面的demo是一个非常简单而常见的布局效果，在这个布局中，我采用了自适应布局。整个布局包含了“头部”、“主内容”、“边栏”和“脚部”，并且“主内容”居左，“边栏”靠右，具体结构请看DEMO中的html部分。
接下来，我们主要看看css部分：
1、在body中设置一个内距，并附上一些基本的样式，大家可以根据自己需要进行不同的设置，此例代码如下：
body {
background: #E8EADD;
color: #3C323A;
padding: 20px;
}
2、设置主容器“wrapper”的样式
主容器的宽度是“100% - 20px * 2”,并且水平居中：
.wrapper {
width: 1024px; /* Fallback for browsers that don't support the calc() function */
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
margin: auto;
}
给不支持calc()的浏览器设置了一个固定宽度值“1024px”。
3、给header和footer设置样式
这个例子中的header和footer很简单，给他们添加了一个内距为20px，其他就是一些基本的样式设置，那么其对应的宽度应该是"100% - 20px * 2"：
#header {
background: #f60;
padding: 20px;
width: 984px;/*Fallback for browsers that don't support the calc() function*/
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
}
#footer {
clear:both;
background: #000;
padding: 20px;
color: #fff;
width: 984px;/* Fallback for browsers that don't support the calc() function */
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
}
4、给主内容设置样式
给主内容设置了一个8px的边框，20px的内距，并且向左浮动，同时设置了一个向右的外边距“20”px，关键之处，我们主内容占容器宽度的75%，这样一来，主内容的宽度应该是“75% - 8px * 2 - 20px * 2”:
#main {
border: 8px solid #B8C172;
float: left;
margin-bottom: 20px;
margin-right: 20px;
padding: 20px;
width: 704px; /* Fallback for browsers that don't support the calc() function */
width: -moz-calc(75% - 20px * 2 - 8px * 2);
width: -webkit-calc(75% - 20px * 2 - 8px * 2);
width: calc(75% - 20px * 2 - 8px * 2);
}
4、设置右边栏样式
给边栏设置了一个25%的宽度，其除了包含8px的边框，10px的内距外，还有主内容外距20px也要去掉，不然整个宽度与容器会相差20px,换句话说就会撑破容器掉下来。因此边栏的实际宽度应该是"25% - 10px * 2 - 8px * 2 -20px":
#accessory {
border: 8px solid #B8C172;
float: right;
padding: 10px;
width: 208px; /* Fallback for browsers that don't support the calc() function */
width: -moz-calc(25% - 10px * 2 - 8px * 2 - 20px);
width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px);
width: calc(25% - 10px * 2 - 8px * 2 - 20px);
}
这样一来，大家就看到了上面demo展现的布局效果。经过此例的学习，大家是不是会觉得使用calc()用于自适应布局是超爽的呀。此时有很多同学肯定会感吧，苦逼的IE6-8不支持，不敢使用。
最后在给大家提供一个heihgt的实例：
时隔好久没有写blog，不知道大家对calc()整明白了没有，要是没有的话，继续动手写几个例子吧。如果您有更好的分享，记得告诉我们哟。
如需转载，烦请注明出处：http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html
“瀑布流布局”随着pinterest网的流行而出名，现在国内使用这种风格布局的网站也越来越多，比如说Mark之，蘑菇街，点点网，哇哦等等。我第一次听到这个布局名称是来自于“乔花写的《瀑布流布局浅析一文”，之后在群里也时不时有同学会问有关于这种布局的使用方法。今天我老话重谈，主要向大家介绍一些相关的制作插件，以及成功的案例，希望能给大家今后的工作有所帮助。
首先简单的向大家推荐几款制作瀑布流的jQuery插件，这些插件能帮助大家轻松的实现类似于pinterest的布局效果：
Masonry是一个动态的网格布局插件。每个元素水平方向都采用全float布局，但在垂直方向使用绝对定位来控制元素的位置，犹如彻墙一样，能做到见缝插针。
Isotope是一款实现动态布局的精致jQuery插件，是单独的CSS无法实现的，而且他可以通过jQuery选择器来控制元素的显示与隐藏等。
BlocksIt.js是一个创建动态的网格布局的jQuery插件。它将HTML元素转换为“块”,它们的位置布局类似于网格布局的Pinterest一样。
Wookmark是一款简单的动态网格布局的jQuery插件。
这是一个客隆了Pinterest网站布局的jQuery，方便你快速创建一个类似于pinterest布局效果的站点
Flex是一个流体不对称的动画网格布局插件。它还有一个鼠标悬停时放大的功能。
上面六款都是jQuery插件，主要功能就是可以使用他们来制作大家所说的瀑布流布局，当然你要是认为他们不好，你可以自己动手写一个这样的插件，这点我相信您行的，但有很多不懂js的同学，还是可以用一用，顶个急。下面我们一起来看看哪些方网站在使用瀑布流布局。
下面展示的都是瀑布流布局的网站，看起来都很经典，然而看起来很熟悉,因为它们都是从Pinterest克隆出来的。否则,他们中的许多人只是简单的创造性使用动态的网格来展示他们的作品和内容。
1.Pinspire
一个经典的瀑布流布局案例，常常被人拿来客隆。
2.WoXiHuan
3.Huaban
4.Mishang
5.Trippy
6.Chill
7.Sworly
8.Veerle
10.GentleMint
除了这些案例之外，当然还有更优秀的，只不过我没有发现，如果大家手上还有更好的插件和案例，希望能与我们分享。谢谢大家。
如需转载，烦请注明出处：http://www.w3cplus.com/resources/create-dynamic-grid-layouts-like-pinterest.html
在Web页面的制作中，总会有时候碰到制作全屏背景的案例，特别是一些页游的专题页面中，为了尽显游戏的风格，时常这样做，看起来很酷。前面在《完美的页面背景图片制作》一文中也介绍过使用CSS3的background-size来制作，那么CSS能制作的效果，为何还要使用jQuery插件来呢？是的，你的想法是对的，但CSS制作有一个不足的地方，没办法添加更多炫的效果，而使用 jQuery插件在制作全屏背景时还可以加上一些特殊的效果，比如说幻灯片效果、纹理效果、缩小效果等。今天收集了十二个这样的插件，方便大家省去GG搜索的时间。
Supersized!是一个创建全屏背景幻灯很有名的jQuery插件。
Vegas Background是一个添加全屏背景或制作出令人惊异的幻灯片的 jQuery插件。这个插件将自动应用一个很酷的纹理,使背景图像看起来像“背景”。（需要翻墙才能打开）
bgStretcher允许您给风页添加背景图像，并且能按比例调整它，来填充整个浏览器窗口。你也可以用它创建一个背景幻灯。
tubular是一个了不起的jQuery插件,可以让你设定一个YouTube视频作为你的网页背景。
Backstretch是一个简单的jQuery插件,允许你给网页动态添加一个背景图像，而且它将拉伸图像以适应浏览器窗口的大小。
此jQuery插件能让您能轻松地给网页会任何一个div添加一个HTML5视频作为背景。它还提供一个图像作为后备，防止用户的浏览器不支持HTML5视频标签。
MaxImage 2.0是一个全画面背景幻灯jQuery插件,允许你使用jQuery插件,支持几乎所有的循环周期的jQuery函数、转换等。
Smooth Fullscreen Background Slideshow是众多制作幻灯片全屏背景插件中最优秀的一种，你可以使用这个插件制作幻灯片播放的全屏背景效果，并且可以通过几行代码给背景图添加网格效果，看起来更完美。
这个背景插件运行良好,IE7+,Firefox、Opera、Safari、Chrome。同时,它很容易集成和每个人都能做到这一点!
一个简单的全屏缩放背景的插件，如果你不需要其他的功能，这个插件是一个很好的插件。
一个轻量级jQuery插件，可以帮你自动调整背景图片大小以适的屏幕的长宽比。
这不是一个jQuery插件,但是一个简单的制作全屏背景幻灯的jQuery教程，你要是有兴趣可以看看。
上面12个制作全屏背景的插件资源来自于Kenny的《12 Fullscreen Background jQuery Plugins》。
上面插件的具体使用方法大家可以对应看其api文档，我只是觉得这些插件有意思，或许哪一天就用得上，收集起来方便要用的时候能一下找到，省去了搜索的时间，如果大家手上还有其他类似这样功能的插件，不仿与大家分享，可以将你知道的插件名和地址在评论中留言，我会添加上去。独乐乐不如众乐乐(^_^)。
下面附上本站有关于CSS方法解决全屏背景图片的方法：
如需转载，烦请注明出处：http://www.w3cplus.com/resources/fullscreen-background-jquery-plugins.html
CSS3中的user-select属性可以控制用户能不能选择页面中的文本，今天给大家介强一个user-modify属性，用来控制用户能否对页面文本进行编辑：
/*只能读*/
.read-only {
-webkit-user-modify:read-only;
-moz-user-modify:read-only;
user-modify:read-only;
}
/*可读可写*/
.read-write {
-webkit-user-modify: read-write;
-moz-user-modify: read-write;
user-modify: read-write;
}
/*只可写*/
.write-only {
-webkit-user-modify: write-only;
-moz-user-modify: write-only;
user-modify: write-only;
}
Web中给标题之类描边的效果时不时的有，在以前都只能使用图片来制作这种效果，现在CSS3中的text-shadow虽然的做出类似的描边效果，但效果并不佳，其实CSS3中还有一个属性，制作描边效果非常的棒，这个属性就是——text-stroke。只可惜的是现在这个属性仅有webkit内核的浏览器支持。
其使用语法是：
.elm {
-webkit-text-stroke: width color;
}
简单的看个实例效果
.blackandwhite{
font-family: 'Courgette';
font-size:3em;
color: black;
text-align: center;
-webkit-text-fill-color: white;
-webkit-text-stroke: 2px black;
}
效果点击DEMO
CSS布局是一个很老的话题了，网上这方面的教程可以说是随处可见，本站前面也有一些相关的布局教程，但都是一些特殊的，比如说《等高布局》、《左定宽度右边自适应的等高布局》、《960网格布局》、《固定footer布局》和《中间固定两边自适应布局》等等。但这些布局并不是常见的布局，使用起来并不是太多，而对于常见的布局，w3cplus还没有对口的教程。好久之前有同学想了解这方面的知识，答应简单的写些这方面的教程，方便初学的csser，或者方便大家使用时，可以直接copy使用。于是就有了这个系列的想法，从今天开始我会针对布局开展一个系列的布局demo结构，整个系列中会包括固定布局（两栏固定布局、三栏固定布局）、自适应布局（两栏自适应布局、三栏自适应布局）、弹性布局（两栏弹性布局、三栏弹性布局）、网格布局（960网格布局、1140网格布局）和响应式布局。希望这些布局的demo结构对大家会有所帮助。
在开始这个系列教程之前先向大家说明一下，这个系列教程都会以简单的篇幅为主，首先从html结构出发，然后对应的布局样式（其中修饰样式，大家可以自行修改），接着向大家展示对应的DEMO效果。如有特殊说明，会以代码注解形式展，或者会单独以特殊效果向大家展。
整个布局系列首先以最常见的固定布局展开，比如说第一篇就是要向大家介绍的是固定布局的中两栏布局。
实现的布局效果：整个布局居中显示，而且侧栏显示在左边，主内容在右边。如下图所示
<div class="wrapper">
<div class="header">
<h1>Header content</h1>
</div>
<div class="aside sidebar">
<h2>Sidebar Content</h2>
</div>
<div class="main-content">
<h2>Main Content</h2>
</div>
<div class="footer">
<h2>Footer Content</h2>
</div>
</div>
结构简单描述：
*{
margin: 0;
padding: 0;
}
body {
font-family: 'Amarante', cursive;
background: url(http://www.w3cplus.com/sites/default/files/bg_body.png) repeat;
text-align: center; /*IE6下让元素居中*/
}
/*===================================================*\
* *
* Layout *
* .wrapper宽度=.sidebar宽度+间距+.main-content宽度 *
* *
\*===================================================*/
.wrapper {
width: 960px; /*页面总宽度*/
margin: 0 auto; /*水平居中*/
text-align: left; /*重置文本对齐方式*/
}
.header {
margin-bottom: 5px; /*顶部与主内容垂直间距，可自行修改*/
}
.sidebar {
width: 220px; /*左边栏宽度，可自行修改*/
margin-right: 20px; /*边栏间距，可自行修改*/
display: inline; /*防止IE6双边距*/
float: left;
margin-bottom: 5px; /*边栏与footer之间的垂直间距，可自行修改*/
}
.main-content {
width: 720px; /*主内容宽度*/
display: inline; /*防止IE6又边距*/
float: left;
margin-bottom: 5px; /*主内容与footer之间的垂直间距，可自行修改*/
}
.footer {
clear: both; /*清除浮动，非常重要，不可缺少*/
}
/*===================================================*\
* *
* 装饰样式，可自行修改 *
* *
\*===================================================*/
.header {
height: 75px;
background-color: #BD9C8C;
margin-bottom: 5px;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}
.sidebar {
height: 350px;
background-color: #E7DBD5;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}
.main-content {
background-color: #F2F2E6;
height: 350px;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}
.footer {
background-color: #BD9C8C;
margin-bottom: 5px;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}
这个布局写样式有两个地方需要特别注意，第一是宽度的计算，“div.wrapper”的总宽度(960px) = “div.sidebar”宽度(220px) + “div.sidebar”右边距(margin-rihgt:20px) + “div.main-content”宽度（720px）；第二是清除浮动，由于“div.sidebar”和“div.main-content”进行了浮动，特别要记得在“div.footer”上清除浮动（此例是这样，如果不是footer紧挨这两个文档流，那么就要考虑在别的标签上添加）。
第二种布局和第一种仅有一处差别，就是侧栏居右，主内容居左，效果如下所示：
这种布局的HTML结构不变，使用第一种布局的结构，我们仅将“div.sidebar”和“div.main-content”的布局样式做一下修改：
/*===================================================*\
* *
* Layout *
* .wrapper宽度=.sidebar宽度+间距+.main-content宽度 *
* *
\*===================================================*/
.wrapper {
width: 960px; /*页面总宽度*/
margin: 0 auto; /*水平居中*/
text-align: left; /*重置文本对齐方式*/
}
.header {
margin-bottom: 5px; /*顶部与主内容垂直间距，可自行修改*/
}
.sidebar {
width: 220px; /*左边栏宽度，可自行修改*/
display: inline; /*防止IE6双边距*/
margin-left: 20px; /*边栏间距，可自行修改*/
float: right;
margin-bottom: 5px; /*边栏与footer之间的垂直间距，可自行修改*/
}
.main-content {
width: 720px; /*主内容宽度*/
display: inline; /*防止IE6又边距*/
float: left;
margin-bottom: 5px; /*主内容与footer之间的垂直间距，可自行修改*/
}
.footer {
clear: both; /*清除浮动，非常重要，不可缺少*/
}
前面两种布局效果，有些同学喜欢在文档流中先加载“div.main-content”主内容部分，然后在加载“div.sidebar”侧栏部分，这样就延伸出来另外两种布局，不过他们的效果是一样的，只是文档流加载的顺序和样式做一定的调整。
<div class="wrapper">
<div class="header">
<h1>Header content</h1>
</div>
<div class="main-content">
<h2>Main Content</h2>
</div>
<div class="aside sidebar">
<h2>Sidebar Content</h2>
</div>
<div class="footer">
<h2>Footer Content</h2>
</div>
</div>
接下来，我们在看看改变HTML结构后，制作上面两种效果的方法。
/*===================================================*\
* *
* Layout *
* .wrapper宽度=.sidebar宽度+间距+.main-content宽度 *
* *
\*===================================================*/
.wrapper {
width: 960px; /*页面总宽度*/
margin: 0 auto; /*水平居中*/
text-align: left; /*重置文本对齐方式*/
}
.header {
margin-bottom: 5px; /*顶部与主内容垂直间距，可自行修改*/
}
.sidebar {
width: 220px; /*左边栏宽度，可自行修改*/
margin-right: 20px; /*边栏间距，可自行修改*/
display: inline; /*防止IE6双边距*/
float: left;
margin-bottom: 5px; /*边栏与footer之间的垂直间距，可自行修改*/
}
.main-content {
width: 720px; /*主内容宽度*/
display: inline; /*防止IE6又边距*/
float: right;
margin-bottom: 5px; /*主内容与footer之间的垂直间距，可自行修改*/
}
.footer {
clear: both; /*清除浮动，非常重要，不可缺少*/
}
结构改变后，我们样式跟着改动的地方其实很简单，只要注意改变“div.sidebar”和“div.main-content”两个元的浮动方向，以及控制他们之间的间距（就左右两栏布局来说，如果一个左浮动，一个右浮动，都可以不设置他们之间的任何间距值）。
/*===================================================*\
* *
* Layout *
* .wrapper宽度=.sidebar宽度+间距+.main-content宽度 *
* *
\*===================================================*/
.wrapper {
width: 960px; /*页面总宽度*/
margin: 0 auto; /*水平居中*/
text-align: left; /*重置文本对齐方式*/
}
.header {
margin-bottom: 5px; /*顶部与主内容垂直间距，可自行修改*/
}
.sidebar {
width: 220px; /*左边栏宽度，可自行修改*/
display: inline; /*防止IE6双边距*/
margin-left: 20px; /*边栏间距，可自行修改*/
float: right;
margin-bottom: 5px; /*边栏与footer之间的垂直间距，可自行修改*/
}
.main-content {
width: 720px; /*主内容宽度*/
display: inline; /*防止IE6又边距*/
float: left;
margin-bottom: 5px; /*主内容与footer之间的垂直间距，可自行修改*/
}
.footer {
clear: both; /*清除浮动，非常重要，不可缺少*/
}
上面两种布局效果，使用了两种不同的文档结构，每种结构配合两整不同的布局方式，大家可以点击对应的效果图，打开在线的demo效果。以上布局兼容所有浏览器。
那么有关于CSS布局第一篇就说到这里，下期将继续为大家介绍固定布局中的两列布局，不过使用的方法并不是今天介绍的方法，如果你对此感兴趣，请关注本站的相关更新。
下一节：《Web布局连载——两栏固定布局（二）》
如需转载，烦请注明出处：http://www.w3cplus.com/css/layout/fixed-layout/two-columns-1.html
在《Web布局连载——两栏固定布局（一）》中，使用了两种不同的结构，配合不同的CSS浮动方法，实两了两种最为常见和最基础的两栏固定布局效果：侧栏在左边，主内容在右边（demo1,demo3），主内容在左边，侧栏在右边（demo2,demo4）。但有时候这种结构的布局并不能满足我们的需要，比如说页面的（header）部分，背景色占满了整个浏览器的宽度，那么在前面那篇文章中的布局就无法使用，因为其里面有一个“div.wrapper”将整个页面受限于一定宽度之下。那么要实现页面部分背景全屏，或者说部分内容全屏，而其他内容居中的效果，我们应该怎么做呢？这就是我今天要给大家介绍的两栏固定布局中的第二种方法，当然这种方法有很多同学在使用，但有些刚学习布局的同学还是值得一看的。
刚才说了，由于结构的受限，所以要实现类似下图效果是行不同的，所以我们有必要先重构一个适合这种布局结构的HTML。
制作类似上图的效果，我们把结构重新重构一回。
<div id="header">
<div class="container">
<div class="header">
<h1>Header content</h1>
<p>W3cplus Layout Template ➽ Fixed Width Layout ➽ Two Columns Layout </p>
</div>
</div>
</div>
<div id="page">
<div class="container">
<div class="main-content">
<h2>Main Content</h2>
</div>
<div class="aside sidebar">
<h2>Sidebar Content</h2>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<h2>Footer Content</h2>
</div>
</div>
简单的说明一下这个结构的用意
结构其实并不复杂，与前一教程的结构相比，这个结构略显复杂一点，每个部位都是包含了一个容器“div.container”。此时大家会问，为什么要在每个部分添加一个这样的容器，难道不能像前面的布局（一）中所言，一个就行吗？其实要实现上面效果，前面的结构是不满足我们的需求了，为他使部分背景或背景图全屏（或者说部分内容全屏）显示，那么我们就有必要单独控制部分内容，让他的宽度是100%。比如说我头部的内容不想居中，那么我们就可以使用
#header .container {
width: 100%;
}
来重置
.container {
width: 960px;
}
让header部分全屏显示。当然大家可以根据需要按类似的方法来实现同样的效果。接下来，我们一起来看两种效果。
今天要实现的第一个效果就是，“header”和"footer"有一个全屏的背景颜色，而其内容依然居中显示，同时“div#page”中的主内容居右显示，侧栏居左。效果如下面的DEMO所示：
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Amarante', cursive;
background: url(http://www.w3cplus.com/sites/default/files/bg_body.png) repeat;
text-align: center; /*IE6下让元素居中*/
}
/*===================================================*\
* *
* Layout *
* .container宽度=.sidebar宽度+间距+.main-content宽度 *
* *
\*===================================================*/
/*清除浮动*/
.container:after,
.container:before {
content: "";
display: table;
}
.container:after {
clear: both;
overflow: hidden;
}
.container {
width: 960px; /*页面总宽度*/
margin: 0 auto; /*水平居中*/
text-align: left; /*重置文本对齐方式*/
zoom: 1;
}
#header {
background: #b1b1b1;/*header全屏背景色设置*/
color: #fff;
margin-bottom: 15px; /*顶部与主内容垂直间距，可自行修改*/
}
.sidebar {
width: 220px; /*左边栏宽度，可自行修改*/
float: left;/*侧栏居左*/
}
.main-content {
width: 720px; /*主内容宽度*/
float: right;/*主内容居右*/
}
#footer {
background: #b1b1b1;/*footer全屏背景色设置*/
color: #fff;
}
/*测试样式，可自行修改*/
#header .container {
height: 75px;
}
.sidebar {
height: 350px;
background-color: #E7DBD5;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}
.main-content {
background-color: #F2F2E6;
height: 350px;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}
#footer .container {
margin-top: 15px;
}
上面样式代码中有两个关键地方，第一是在“div.container”中进行清浮动，因为在“div#page”内左边栏和主内都进行了浮动布局，所以有必要清除浮动，当然大家可以在“div.container”中多添加一个类名“clearfix”来清除浮动；第二点就是“div.container”的宽度应该等于“div.sidebar”宽度、“div.main-content”以及这两者之间的间距之和。这一点和前面的“wrapper”宽度是一样的。
接下来我们来看第二种情况，就是主内容居左，侧栏居右。这种效果，实现结构和前面结构一致，只是稍微改变一下侧栏和主内容的浮动方向，其效果如下面的DEMO所示：
.sidebar {
width: 220px; /*左边栏宽度，可自行修改*/
float: right;/*侧栏居右*/
}
.main-content {
width: 720px; /*主内容宽度*/
float: left;/*主内容居左*/
}
通过改变他们的浮动方向，达到两栏布局位置的调换。
正如前面所言，如果你的效果有一部分是内容也全屏显示，那么我们可以通过其父容器与“div.container”的配合，来重新设置“div.container”的宽度，此时“div.container”的宽度不在是两栏宽度与间距之和，应该是“100%”。比如说，你的页面顶部有一个工具导航栏：
#headerbar .container {
width: 100%;
}
实现效果就是这么简单，大家感兴趣的话不仿一试效果。
那么到这就介绍完了两栏固定布局的第二种方法，两种方法相比，各有利弊。前一种方法结构简单，易于理解，但受限太多，扩展性差；而今天介绍的方法结构复杂一顶点，部分同学可能会难以理解，但其扩展性强。至于何时使用哪种布局，其实不用我说，大家看DEMO就一目了然。不过我自己更趋于使用今天介绍的方法。
今天就说到这里了，下一期将为大家介绍两栏固定布局中的第三种方法，使用浮动配合负的margin来实现。这种方法相对这两种方法来说，难度稍为大一点，不过也不会非常复杂。有兴趣的同学，敬请观注本站的相关更新。
上一节：《Web布局连载——两栏固定布局（一）》
下一节：《Web布局连载——两栏固定布局（三）》
如需转载，烦请注明出处：http://www.w3cplus.com/css/layout/fixed-layout/two-columns-2.html
前两篇介绍的布局，是我们Web布局中常见的，而且可以说是最基础的布局结构。今天这一节中我们继续介绍两栏固定布局，只不过今天的这种布局较前两节中的布局要更为难理解。而且叫法不一，我个一般喜欢把这种布局称为负margin布局，因为在布局中我们需要依靠元素的margin-left和margin-right的相关负值。
负margin的布局实现两栏布局的方法也非常的多，今天我要先介绍的是两栏布局效果，侧栏在居左，主内容居右，而且采用四种不同的负margin布局法实现这样的效果。
首先也多结构出发，大家还是一起看代码结构吧：
<div id="header">
<div class="container">
<div class="header">
<h1>Header content</h1>
<p>W3cplus Layout Template ➽ Fixed Width Layout ➽ Two Columns Layout </p>
</div>
</div>
</div>
<div id="page">
<div class="container">
<div class="main-wrap">
<div class="main-content">
<h2>Main Content</h2>
</div>
</div>
<div class="aside sidebar">
<h2>Sidebar Content</h2>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<h2>Footer Content</h2>
</div>
</div>
同样简单的说明一下布局结构
结构相对于《Web布局连载——两栏固定布局（二）》中的结构来说，大同小异，只是今天的布局中在主内容外添加了一个容器（div.main-wrap）。那么接下来我们在写布局样式之前先来简单的了解一下今天这个布局的基本原理。
负margin布局，从字面上大家都能知道是使用元素的负margin来实现布局。其实更简单点理解就是使用元素的margin配合float的方向，从而达到我们需要两栏布局效果，我们一起看看下图：
如果上图不能帮助你理解，那么可以结合CSS样式代码一起，我想这样会有成效的，易于理解。
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Amarante', cursive;
background: url(http://www.w3cplus.com/sites/default/files/bg_body.png) repeat;
text-align: center; /*IE6下让元素居中*/
}
/*===================================================*\
* *
* Layout *
* .container宽度=.sidebar宽度+间距+.main-content宽度 *
* *
\*===================================================*/
/*清除浮动*/
.container:after,
.container:before {
content: "";
display: table;
}
.container:after {
clear: both;
overflow: hidden;
}
.container {
width: 960px; /*页面总宽度*/
margin: 0 auto; /*水平居中*/
text-align: left; /*重置文本对齐方式*/
zoom: 1;
}
#header {
background: #b1b1b1; /*header全屏背景色设置*/
color: #fff;
margin-bottom: 15px; /*顶部与主内容垂直间距，可自行修改*/
}
.main-wrap {
float: left;/*很重要*/
width: 100%;/*很重要*/
}
.main-content {
margin-left: 240px;/*sidebar width + margin-right*/
}
.sidebar {
width: 220px; /*左边栏宽度，可自行修改*/
float: left; /*侧栏居左*/
margin-left: -960px;/*容器container的宽度*/
display: inline;/*清除IE6下又边距*/
zoom: 1;
position: relative;
}
#footer {
background: #b1b1b1; /*footer全屏背景色设置*/
color: #fff;
}
/*测试样式，可自行修改*/
#header .container {
height: 75px;
}
.sidebar {
height: 350px;
background-color: #E7DBD5;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}
.main-content {
background-color: #F2F2E6;
height: 350px;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}
#footer .container {
margin-top: 15px;
}
上面就是方法一对应的样式代码，最终效果如下面DEMO所示：
针对方法一的结构，我绘制了一个参数改变的表格，也就是说，大家以后可以根据表格，改变相应的参数值。特别声明，仅蓝底白字参数可以修改。
方法二和方法一结构是一样的，只是其样式实现方法不一样，改变了浮动的方法以及相关元素的margin值，同样在写样式之前，我们来看看其结构的演示变化图：
接下来我们一起来看对应的样式变化
.main-wrap {
float: right;
width: 100%;
display: inline;
}
.main-content {
margin-left: 240px;/*左边栏宽度+右边距*/
}
.sidebar {
width: 220px; /*左边栏宽度，可自行修改*/
float: right; /*侧栏居左*/
margin-right: -220px;/*左边栏宽度*/
position: relative;
display: inline;
}
最终效果和方法一一样的，请看DEMO：
同样为了方便大家理解，我制作了一个对应的参数变化表格(同样仅蓝底白字部分参数可以对应修改)：
方法三和前面两种方法采用的结构仍然一样，只是改变不同的参数，换句话说方法一、方法二都是在方法一的基础上延伸出来的，同样，先来看其演变示意图
经过修改的部分样式代码（其他代码和方法一中一样）
.main-wrap {
float: right;
width: 100%;
margin-right: -240px;/*边栏宽度和间距*/
display: inline;/*清除IE6又边距bug*/
}
.main-content {
margin-right: 240px;/*边栏宽度和间距*/
}
.sidebar {
width: 220px; /*左边栏宽度，可自行修改*/
float: left; /*侧栏居左*/
position: relative;
}
最终效果如下面DEMO所示：
对应的参数变化表格(同样仅蓝底白字部分参数可以对应修改)：
最后一种方法和前面几种方法略有不同，这种方法具有今天前面介绍的三种方法特性，但也兼容了前面两节介绍的布局个性，下面我们来简单的看看最后一种布局的实现方法
HTML结构
<div id="header">
<div class="container">
<div class="header">
<h1>Header content</h1>
<p>W3cplus Layout Template ➽ Fixed Width Layout ➽ Two Columns Layout </p>
</div>
</div>
</div>
<div id="page">
<div class="container">
<div class="main-content">
<h2>Main Content</h2>
</div>
<div class="aside sidebar">
<h2>Sidebar Content</h2>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<h2>Footer Content</h2>
</div>
</div>
此处的结构和前面三种方法相比较，少了一个主内容的外容器（div.main-wrap），但和前两节介绍的布局结构是完全一样的，接下来看一下其布局的演示图：
对应的样式如下所示：
.main-content {
float: left;
width: 720px;/*主内容宽度*/
display: inline;/*清除IE6下双边距Bug*/
margin-right: -100%;
margin-left: 240px;/*边栏宽度和间距*/
position: relative;
zoom: 1;
}
.sidebar {
width: 220px; /*左边栏宽度，可自行修改*/
float: left; /*侧栏居左*/
margin-left: 0;
margin-right: -220px;/*边栏宽度*/
display: inline;
position: relative;
}
通过上面的方法，在缺少一个结构的情况下，使用负margin和float同样实现方法一、二、三的布局效果。
对应的参数变化表格(同样仅蓝底白字部分参数可以对应修改)：
共实这种方法是由drupal的zen主体布局上演变过来的，如果你整个drupal或许一眼能看出来。
上面是实现同一效果使用的不同四种方法，虽然是不同的四种方法，但可以说这些方法是大同小异，只要你理解了其原理，哪一种方法对于来说都不复杂，只是你以前没有去想过，或者觉得负margin的布局头痛，烦人，才没去使用，希望这篇文章对布局感到陌生的同学有一丝帮助。上面四种方法都经过各浏览器的测试，可以兼容所有浏览器，包括讨厌的IE6。
这篇文章是继《Web布局连载——两栏固定布局（一）》、《Web布局连载——两栏固定布局（二）》之后的第三篇介绍两栏固定布局方法的文章，下一节将继续为大家介绍使用负margin制作两栏固定布局的方法，和今天不同之处是侧栏居右，主内容居左。如果你喜欢这个系列的文章，请关注本站的相关更新，如果你有什么更好的建议或者文章中有出错之处可以随时在评论中留言，我会第一时间回复。
上一节：《Web布局连载——两栏固定布局（二）》
如需转载，烦请注明出处：http://www.w3cplus.com/css/layout/fixed-layout/two-columns-3.html
function css(obj, attr, value){
switch (arguments.length){
case 2:
if(typeof arguments[1] == "object"){
for (var i in attr) i == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + attr[i] + ")", obj.style[i] = attr[i] / 100) : obj.style[i] = attr[i];
}else{
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
}
break;
case 3:
attr == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + value + ")", obj.style[attr] = value / 100) : obj.style[attr] = value;
break;
}
};var get = {
byId: function(id) {
return document.getElementById(id)
},
byClass: function(sClass, oParent) {
if(oParent.getElementsByClass){
return (oParent || document).getElementsByClass(sClass)
}else{
var aClass = [];
var reClass = new RegExp("(^| )" + sClass + "( |$)");
var aElem = this.byTagName("*", oParent);
for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
return aClass
}
},
byTagName: function(elem, obj) {
return (obj || document).getElementsByTagName(elem)
}
};
//实例
var oNav = get.byId("nav");
var aLi = get.byTagName("li", oNav);
var aSubNav = get.byClass("subnav", oNav);var EventUtil = {
addHandler: function(elem,type,handler){
if (elem.addEventListener) {
elem.addEventListener(type, handler, false);
}else if(obj.attachEvent){
elem.attachEvent('on'+type,handler);
}else{
elem["on"+type] = handler;
}
},
removeHandler: function(elem,type,handler){
if (elem.removeEventListener) {
elem.removeEventListener(type, handler, false);
}else if(obj.attachEvent){
elem.detachEvent('on'+type,handler);
}else{
elem["on"+type] = handler;
}
},
getEvent: function(){
return event ? event : window.event;
},
getTarget: function(){
return event.target || event.srcElement;
},
preventDefault: function(){
if(event.preventDefault){
event.preventDefault;
}else{
event.returnValue = false;
}
},
stopPropagation: function(event){
if(event.stopProgation){
event.stopProgation;
}else{
event.cancalBubble = true;
}
}
};
/**
/ THIRD FUNCTION
* getPageSize() by quirksmode.com
*
* @return Array Return an array with page width, height and window width, height
*/
function ___getPageSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
return arrayPageSize;
};/**
/ THIRD FUNCTION
* getPageScroll() by quirksmode.com
*
* @return Array Return an array with x,y page scroll values.
*/
function ___getPageScroll() {
var xScroll, yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
xScroll = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
xScroll = document.documentElement.scrollLeft;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
xScroll = document.body.scrollLeft;
}
arrayPageScroll = new Array(xScroll,yScroll);
return arrayPageScroll;
};css3 go借鉴于zen garden，旨在基于同一套html代码，用css3来完成丰富的效果，往简单点说，就是换肤吧。毕竟css3还不是很成熟，需要我们去做很多尝试，大家一起使劲，把各自积累的经验分享下，这样大家学习的成本也会大大降低，同时也一起促进了css3的发展。
最近在网上看了“十年体”，说的是一个男生因为女友给出不可能在一起的理由而奋斗十年将这个“不可能”的理由实现的故事。借此十年体，我给css3 go起了一个口号——十年磨一剑，今朝展锋芒。到底css发展了几年才演变成如今的css3，我也不知道。抛开时间不说，奋斗才是根本，将不可能转成可能，没有以后，就在今朝。只有大胆的去用，我们才能发现问题，如果天天束缚于ie6-8，也许过个一两年你就会拍着脑袋说当初怎么就没有好好去去学点呢。
当然因为更侧重使用css3，所以html在设计的时候还是比较干净简练的，至于实现效果方面，那当然图片越少越好，页面或干净整洁或绚烂动画皆可，兼容的浏览器也是对css3支持良好的浏览器，当然可以做成响应式布局，或直接就手机版啊都是可以的，也可加入jquery来完成更精彩的页面。目前我做了三个，但因为其中一个还有bug（本以为调好了，回到家一看跟公司又不一样），所以今天只上线两个，当做抛砖引玉，让我们一起期待更好的作品。
css3 go期待您的参与，因为有您而更加精彩，加入请点击下载css3go-html.zip，这里面包含一个css3go.html和一个空白的style.css文件，其余的完全由您自己发挥，html部分只允许修改下面的作者信息，其余敬请尊重模板。我们会将您的优秀作品放入下面作品列表，供广大前端爱好者一起学习分享，css3 go期待您的精彩！
css3 go作品列表：
css3 go欢迎您的加入：css3go-html.zip
ps:第三个作品其实你修改下地址为demo3就可以访问，但是目前是有bug的，还需修正，所以没有正式发布，但是如果你感兴趣的话，也可以提前看看有bug的东西。
