江湖再见

相信对于很多初学者，对于css3的transition到底是直接写在选择器上，还是写在选择器的hover上表示疑惑，下面给出两个实例，希望可以为您解惑。demo1demo2.demo{ width: 100px; height: 100px; text-align: center; line-height: 100px; border: 10px solid #ccc; bo

IE6 的bug算是让人头疼甚至蛋疼到了极点，有时候他的种种bug会带给你无限的惊奇，有时候一个在其他浏览器上非常完美的网页到IE6上就乱成一团。今天就遇到了这个问题，在firefox上调试页面时页面都没问题，但一到IE6上，吓了一跳，布局完全乱掉。后来发现是IE6下浮动层双倍边距的bug引起的，于是就把问题整理了一下，分享给大家，相信写网页的朋友一定会遇到这种神奇的事情的。bug问题描述：

两种情况清除浮动包括清除子元素的浮动和清除上级元素的浮动，其中清除上级元素的浮动，只需设置clear为both就可以了，而清除子元素的浮动则可以用空标签法、clearfix方法或overflow方法。因清除上级元素的浮动比较简单，而空标签法清除子元素浮动会增加额外标签，所以在这里主要说clearfix方法、overflow方法及偶然发现的inline-block方法。为什么要清除浮动

3px bug 和左浮动右侧顶部对齐 *{ margin:0; padding:0; } body{ font-family:"Lucida Console", Monaco, monospace,"宋体"; font-size:16px; } a,img{ border:0 none; } .w

CSS样式让图片垂直居中*{ margin:0; padding:0; list-style-type:none; } a,img{ border:0;}.wrapper{ margin:0 auto; width:1000px; }.box{ width:200px; height:200px; text-align:center; position:rel

其实就是使用rgba这个属性 显示文字

关于线性渐变:webkitbackground: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));渐变的类型? (linear)渐变开始的X Y 轴坐标(0 0 – 或者left-top)渐变结束的X Y 轴坐标(0 100% 或者left-bottom)开始的颜色? (from(red))结

受bootstrap框架的启发，以后在我做的项目中，模块化。

推荐地址：http://www.bootcss.com/p/lesscss/

多列布局以下属性多需要加前缀：-webkit-/-moz-/-o-/-ms-/自身columns： || 列宽/列数eg:columns:200px 3;column-gap: normal || 列间距eg:column-gap: 2em;column-rule:||列表边框eg:column-rule: 2px dotted green;

CSS3 是对 CSS 规范的改善和增强，增加了圆角、旋转、阴影、渐变和动画等众多强大的特性，它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。以前很多需要编写 JavaScript 才能实现的效果，如今只需几句简单的 CSS3 代码就能实现。CSS3 Maker这款工具非常强大，可在线演示渐变、阴影、旋转、动画等非常多的效果，并生成对应效果的代码。Border Radi

一个页面一般会加载多少张css背景图？首先让我们回忆一下，以前切页面时，会用到哪些类型的素材图？我努力的想…努力的想啊…大概有：按钮、图标、其它固定尺寸背景图、横竖平铺背景图、横铺背景图、竖铺背景图、左右自适应背景图、上下自适应背景图、颜色鲜艳且尺寸较大的背景图。从站点的可实现性上考虑，我们该做多少张雪碧图？请看下面这张表：从表中可以分析出，一个页面的背景图的请求数为：

/**此类用来管理QQ的动作比如，挤眼，走路，跳跃,听歌等*/function qq(){ this.eye_wink_flag = false; //控制眨眼的标记 this.eye_flag = false; //眼睛状态标记 this.words = new Array( '今天的天气很好的哇,主人为何

有这么一个样式，可以在你实现无色和加色之间游刃有余。网站设计师在设计网页时，有时将一块图片设计成灰色，鼠标移上去，图片就有颜色。一般的逻辑是做两张图片，然后在鼠标上做图片切换事件。当然这种方法可以完美是实现， 不过有个小瑕疵，就是你要切一倍的图片（有色 + 无色）。下面介绍样式实现，可以减少一倍量的工作哦。// HTMLCSS.grayscale img{filter: g

double linesCSS code.doubleline{border:3px double #ccc}indented linesHTML code Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu ris

核心css代码firefox从7.0开始兼容text-overflow:ellipsis;这样的话，以后单行的省略号就可以不借助后台程序或者js来做到浏览器兼容了，其核心代码为：selector{ -o-text-overflow: ellipsis;/*兼容opera*/ text-overflow: ellipsis;/*这就是省略号喽*/

HTML 目的 这是一个简单的列表菜单，当你鼠标移到菜单项时，有一张图片慢慢的从左边向右边移动，并淡淡显示出来，而且此时的菜单项背景色和字体色也同时会改变。下面我们一起来简单的学习这种效果的制作。 -- 首页 -- 照片墙 -- 语录本 CSSbody { margin:0 auto; width:900px; paddin

HTML 目的 再次领会了CSS3的强大，充分利用:before和:after两个方法，同时中间还涉及到了线性渐变。 Facebook Twitter RSS Flickr Delicious LinkedIn Google Orkut Technorati NetVibes Google+ Yahoo Tumblr

效果HTML 目的 再次领会了CSS3的强大，充分利用:before和:after两个方法，同时中间还涉及到了线性渐变。 DEMO1 DEMO2DEMO3-1DEMO3-2DEMO3-3DEMO4DEMO5 CSSbody { padding:0; margin:0 auto; width:700px; font:1em/1.4 Cambri

先睹为快今天推荐一个有关于Background的多背景使用——CSS3 Multipls Backgrounds。先作个对比CSS2中的Background属性： background: background-color || background-image || background-repeat || background-attachment ||

CSS3中的Background-clip属性，其主要是用来确定背景的裁剪区域，换句话说，就是如何控制元素背景显示区域。首先来看其语法：background-clip ： border-box || padding-box || content-box取值说明：1、border-box:此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉；2、padding-box：背景

制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)等更高级的CSS3技术。下列文字主要说明变形(transform)。本例子的最终效果先睹为快：语法   transform ： none | [ ]*    transform: rotate | scale | skew | translate |m

效果图：--未改变属性前效果：--执行完动画后的最终效果语法：transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transition-timing-function,变换延迟时间transition-delay。下面分别来看这四个属性

扯几句闲:text-shadow还没有出现时，大家在网页设计中阴影一般都是用photoshop做成图片，现在有了css3可以直接使用text-shadow属性来指定阴影。这个属性可以有两个作用，产生阴影和模糊主体。这样在不使用图片时能给文字增加质感。text-shadow曾经在css2中就出现过，但在css2.1版本中又被抛弃了，现在css3.0版本又重新捡回来了。这说明text-shadow

扯几句先一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中，大家都碰到过圆角的制作。当时，对于圆角的制作，我们都需要使用多张圆角图片做为背景，分别应用到每个角上，我应用最多的就是在需要圆角的元素标签中加四个空标签，然后在每个空标签中应用一个圆角的背景位置，然后在对这几个应用了圆角的标签进行定位到相应的位置，具体实现过程我就不在多讲，只看方法就知道烦死人。

扯几句先第三个动画属性Animation的学习，单从Animation字面上的意思，我们就知道是“动画”的意思。但CSS3中的Animation与HTML5中的Canvas绘制动画又不同，Animation只应用在页面上已存在的DOM元素上，而且他跟Flash和JavaScript以及jQuery制作出来的动画效果又不一样，因为我们使用CSS3的Animation制作动画我们可以省去复杂的

等高布局 *{ margin:0; padding:0; } body{ font-family:"Lucida Console", Monaco, monospace,"宋体"; font-size:16px; } a,img{ border:0 none; } .wrap{ wid

1、避免使用 @import@import 最常见的用法是把所有的 CSS 文件通过 @import 链接到一个 CSS 文件中，如 main.css这样往往会导致嵌套的发生，就是被 import 的文件也通过 @import 链接其他 CSS 文件。这样的结果会导致页面加载变慢。

先睹为快：扯几句先：本文探讨一下CSS3中的box-shadow的使用方法。CSS3的box-shadow有点类似于text-shadow，只不过不同的是text-shadow是对象的文本设置阴影，而box-shadow是给对象实现图层阴影效果。我们搁下IE不谈，只谈谈box-shadow的具体使用方法。语法：E {box-shadow: ??||}

css3