NOTEPAD++
Ctrl+E(选择器 $序号 intro类)
.intro>a.item[href=javascript:void(0)]*3
.intro>a.item[href=javascript:void(0)][name=$]*3
Ctrl+Y 撤销前
Ctrl+F 查找、查找、、
Ctrl+H 历史
Ctrl+S 保存
(PS)
Ctrl+Shift+Alt+S(匿名保存)
.clear{clear:both;}清除浮动
vertical-align 属性设置元素的垂直对齐方式
display: table-cell; 行内元素（文字图片）居中
position:relative
position:absolute
-------------------------------------------------------
initial 初始值
.lux_sideico {
margin-left: -50px
}
@media (max- 1050px) { /* 宽度不超过xxx时 */
.lux_sideico {
margin-left: initial;}
}
-------------------------------------------------------
box-sizing: border-box;除去padding值 ie7不兼容(padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ))
兼容 使border、padding引用之内
box-sizing: border-box;
-------------------------------------------------------
注意：
使用z-index时，如果有position，必须在同一父元素才有用
如：
<ul>
<li syle="position:relative;">
<a href="#" style="position:absolute;"></a>
</li>
<li></li>
</ul>
-------------------------------------------------------
p可以包含span
兼容
-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
目前的几种现代浏览器的内核，主流内容主要有Mozilla（熟悉的有Firefox，Flock等浏览器）、
WebKit（熟悉的有Safari、Chrome等浏览器）、Opera（Opera浏览器）、Trident（讨厌的IE浏览器）
background(-image)
1. -webkit-linear-gradient(left, #777, #fff)/-o-linear-gradient/-ms-linear-gradient/-moz-linear-gradient/
CSS的线性渐变，表示方向从左到右颜色从灰色(#777)到白色（#fff）线性渐变， 当然这个是针对wekit浏览器的（这是CSS3还没统一标准时的写法）
text-indent: -9999em;文字缩进 图片时加··便于搜索
圆角
(1) moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;
(2) border-radius: 3px 3px 0 0;
(3) border: solid white;border- 1px 1px 0;
框架上下左右居中
<div
style="800px;background:rosybrown;position:absolute;top:50%;left:50%;
margin-left:-400px; height:240px;margin-top:-120px; /* negative half of the height */">
</div>
background:url(img/ss.jpg)repeat 0 12px;(left top)
text-decoration: none;(取消链接下划线)
ul.header_item li.like a{background:url(images/ico.png) no-repeat 0 13px;text-indent:-9999em;padding:0 15px;}
（鼠标滑过出现）
第一种：
<html>
<head>
<style type="text/css">
.transparent {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;}
.color{160px;height:160px;background:blue;position:relative;}
.hoverbox{160px;height:30px;background:#000;position:absolute;bottom:0;}
</style>
</head>
<body>
<div class="color"><span class="hoverbox transparent">hover</span></div>
</body>
</html>
第二种：
<dt style="166px;position:relative;margin:13px">
<img src="example/1.jpg"/>
<div class="cen_msimg">
<a href="#" style="margin:0 10px;147px;">
<span class="hoverbox transparent">100100评一下</span>
</a>
</div>
</dt>
C:\htdocs\moxian_system\resource\common_info
1.兼容多浏览器的CSS背景透明
在CSS中有一个Alpha滤镜，这个滤镜可以设置目标元素的透明度。还可以通过指定坐标，从而实现各种不通范围的透明度。具体语法如下：
引用内容：
{filter： alpha(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy)}
具体参数：
opacity 透明度。默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。
finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。
style 指定透明区域的形状特征：0 代表统一形状，1 代表线形，2 代表放射状，3 代表矩形
startx 渐变透明效果开始处的 X坐标。
starty 渐变透明效果开始处的 Y坐标。
finishx 渐变透明效果结束处的 X坐标。
finishy 渐变透明效果结束处的 Y坐标。
测试：
filter:alpha(opacity=50);
#snake{
backgournd: #666;
filter:alpha(opacity=50); /*IE*/
-moz-opacity:0.5; /*MOZ , FF*/
opacity:0.5; /*CSS3, FF1.5*/
}
<div id=”snake” >背景透明效果</div>
/****************百度的这个例子更简单,哈哈
//透明层
<div id=”dialogBoxBG” style=”position: absolute; top: 0px; left: 0px; 100%; height: 2999px; z-index: 10001; opacity: 0.4; background-color: #eeeeee;”/>
//透明层上面的浮动层 如登陆表单等等。
<div id=”dialogBox” style=”border: 1px solid #709cd2; z-index: 10003; position: absolute; 440px; left: 410.5px; top: 128px;”>
opacity:0.4 //这种写法只适用于FF
filter:alpha(opacity=50); //这种写法只适用于IE
所以要这两种同时写上就能兼容了
2.解决IE6背景图片不缓存的问题
IE6在背景图片缓存上有一个bug：它会每次都从服务器端读取背景图片。例如我们使用a:hover更换背景图片，在IE6下会出现每次鼠标滑过 则重新向服务器请求图片，如果服务器反应较慢，那么hover效果就会出现短暂的空白，令人极度不爽。虽然可以通过CSS sprites的方式解决问题的，但效果差强人意。 示例： a{ background:url(normal.gif); } a:hover { background:url(hover.gif); } 如果为超级链接定义上述的css样式以实现鼠标悬浮时的动态效果，在firefox下是没有什么问题的，第一次加载之后，浏览器都会从缓存读取背景图片. 解决方法 具体的解决方法就是在页面中加入一段简单的javascript脚本，告诉IE6：本地有背景图片的话就不要麻烦服务器了。 document.execCommand(“BackgroundImageCache”,false,true); 关于这段脚本的放置方式有两种：
1.使用CSS，在CSS中加入如下代码 html {}{ filter: expression(document.execCommand(“BackgroundImageCache”, false, true)); }
2.使用JS： document.execCommand(“BackgroundImageCache”,false,true);
----------------------------------------------------------------------------------------------------------------------------------
transition
-webkit-transition: all 0.1s linear;
-khtml-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值：
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)；
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)；
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)；
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)；
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)；
6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
----------------------------------------------------------------------------------------------------------------------------------
阴影
--------------------------
阴影加旋转
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
--------------------------
css3阴影属性box-shadow的一些注意点:
box-shadow:阴影水平偏移值（可取正负值）； 阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色；
Firefox支持Box Shadow(阴影)：-moz-box-shadow:2px 2px 5px #333333；
webkit内核的Safari和Chrome支持Box Shadow(阴影)：-webkit-box-shadow:2px 2px 5px #333333；
Opera支持Box Shadow(阴影)：box-shadow:2px 2px 5px #333333；
IE不支持Box Shadow(阴影)；
同一个元素可以使用多个阴影，box-shadow:2px 2px 5px #333333,box-shadow:-2px -8px 5px #333333;；
js中可以使用：obj.style.webkitBoxShadow=值（字符串）;obj.style.MozBoxShadow=值（字符串）;obj.style.boxShadow=值（字符串）;
查看一个box-shadow(阴影)演示：http://www.css88.com/tool/css3Preview/Box-Shadow.html
http://www.w3cplus.com/demo/css3/chunkyButton/index.html
2012/10/23 background-size: auto || <length> || <percentage> || cover || contain
（图片大小变形）
/*Ｍozilla*/
-moz-background-size: auto || <length> || <percentage> || cover || contain
/*Webkit*/
-webkit-background-size: auto || <length> || <percentage> || cover || contain
/*Presto*/
-o-background-size: auto || <length> || <percentage> || cover || contain
/*W3c标准*/
background-size: auto || <length> || <percentage> || cover || contain
取值说明：
1、auto:此值为默认值，保持背景图片的原始高度和宽度；
2、<length>此值设置具体的值，可以改变背景图片的大小；
3、<percentage>此值为百分值，可以是0％?100％之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。
4、cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合 容器的大 小，但这种方法会使用背景图片失真；
*5、contain:此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们 就可以使 用contain将图片缩小到适合容器大小为止，这种方法同样会使用图片失真。
当background-size取值为<length>和<percentage>时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己 原始高度 ，而会与第一个值相同。
图片缩放与剪切（主要用定位）
clip: rect(0 85px 70px 15px);
、
clip (top,right,bottom,left); /IE8/
最小高度兼容IE6
.with_minheight{min-height: 550px;}
、
.with_minheight {min-height:550px;height:auto !important;height:550px;}
9/11/2012 星期五 http://www.w3cplus.com/content/css3-multiple-backgrounds
Background-attachment：设置背景图片是否随着文字移动而移动，还是固定在一个位置上。
scroll：背景图像是随对象内容滚动
fixed：背景图像固定
background-size用来控制背景图片的尺寸，background-clip用来控制背景图片的显示区域,background-origin用来控制background-position起始原点，以及今天给大定介绍的CSS3 Multiple Background，用来给同一个元素设置多个背景图片。
CSS3方法 动画效果（Transition）
<style type="text/css">
.box { position: relative; -webkit-transition: top 300ms linear;
-moz-transition: top 300ms linear;
-o-transition: top 300ms linear;
-ms-transition: top 300ms linear;
transition: top 300ms linear;
}
.box:hover {top: 20px;}
</style>
<div class="box">
<!--CONTENT-->
</div>
--------------------------------------------------------------
你那啊啊啊....
text-overflow: ellipsis;white-space: nowrap; 236px;
overflow: hidden;white-space: nowrap;
--------------------------------------------------------------
将图像作为列表项标
ul
{
list-style-image:url("/i/arrow.gif");
list-style-type:square;
}
<ul>
<li></li>
<li></li>
</ul>
--------------------------------------------------------------
如何给IE8 以下的浏览器制定一个独立的css样式?
<!--[if (gt IE 5)&(lt IE 7)]>
<script>
var oldOnload = window.onload?window.onload : function(){};
window.onload = function(){
oldOnload()
while(!window.confirm(unescape('%u8FD9%u795E%u9A6C%u5E74%u5934%u4E86%uFF0C%u8FD8%u7528IE7%u2193%uFF0C%u6EDA%u4E00%u8FB9%u53BB)');
window.location.href="http://chrome.google.com/";
}
//your code here
<![endif]-->
while(!window.confirm(unescape('%u8FD9%u795E%u9A6C%u5E74%u5934%u4E86%uFF0C%u8FD8%u7528IE7%u2193%uFF0C%u6EDA%u4E00%u8FB9%u53BB)'));
--------------------------------------------------------------
关于自定义浏览器滚动条的样式这一块，如果网站可以不考虑非WebKit内核浏览器的话，倒是可以试试只用CSS去实现。
简单地修改一下几项，就可以看到效果了：
::-webkit-scrollbar{12px; height:12px;} /*滚动条垂直方向的宽度与水平方向的高度*/
::-webkit-scrollbar-button{} /*滚动条按钮*/
::-webkit-scrollbar-track{} /*滚动条轨道*/
::-webkit-scrollbar-track-piece:vertical{} /*滚动条垂直方向轨道件*/
::-webkit-scrollbar-track-piece:horizontal{} /*滚动条水平方向轨道件*/
::-webkit-scrollbar-thumb{} /*滚动条轨道上的按钮*/
::-webkit-scrollbar-corner{} /*滚动条轨道上的滚动角*/
--------------------------------------------------------------
目前越来越多的浏览器兼容CSS3标准了，就连IE浏览器老大哥也开始向CSS3低头，微软宣布IE9浏览器支持更多的CSS3属性，IE9更注重HTML5标准。不过CSS3里有一个使对象旋转的属性transform rotate，号称兼容CSS3的浏览器对它的支持也不算好，好在Firefox、Webkit和Opera这些浏览器都已经提供了官方的hack去支持这个属性。唯独在IE浏览器里对这个transform属性无法通过一般的CSS写法去实现。 内容来自www.00isp.com
在W3C官方的标准里，通过transform属性使对象旋转的写法如下：
transform: rotate(40deg); 其中40是旋转的角度
可是由于目前几乎所有的浏览器对这个属性的渲染效率都很低，所以我们可以用下面的hack去提高渲染效率：
-o-transform: rotate(40deg); Opera浏览器
-webkit-transform: rotate(40deg); Webkit内核浏览器
-moz-transform: rotate(40deg); Firefox浏览器
由于目前所有版本的IE都不兼容CSS3，所以我们只能通过IE的CSS滤镜来实现，写法如下：
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)"
--------------------------------------------------------------
background-image可使用多背景图
组合与拆分写法：
组合：
.test{
background:url(1.jpg) no-repeat,url(2.jpg) no-repeat 25px 25px,url(3.jpg) no-repeat 50px 50px;
}
拆分：
.test{
background-image:url(1.jpg),url(2.jpg),url(3.jpg);
background-repeat:no-repeat;
background-position:0 0,25px 25px,50px 50px;
}
--------------------------------------------------------------
兼容IE与firefox的css 线性渐变（linear-gradient）
IE系列
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');
参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，为1时代表水平
Firefox
background: -moz-linear-gradient(top, #FF0000, #F9F900);
参数：top、bottom垂直，left、right水平 例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变
Opera
background: -o-linear-gradient(top,#FF0000, #F9F900);
参数：top、bottom垂直，left、right水平 例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变
webkit，如Chrome、Safari等
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));
参数：linear线性， x1 x2, x3 x4 x1与x3相同时垂直，x2与x4相同时水平 from起始颜色 to结束颜色
background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215));
background-image: -webkit-linear-gradient(top, #ededef, #ccc);
--------------------------------------------------------------
rgba(40, 173, 243, 0.5);
RGB是说颜色，A是指透明度
红40, 绿173, 蓝243, 透明度50%
--------------------------------------------------------------
transform使用参考指南
http://hszy00232.blog.163.com/blog/static/43022753201081822131223/
transform的属性包括：rotate() / skew() / scale() / translate(,)
1.scale：缩放，1为原始大小。scale(x)。正数放大，负数缩小。属性值为一个时，x/y轴同时缩放；属性值为两个值时，分别控制x、y轴的缩放。
.scale{100px;height:50px;background:#f00;-webkit-transition:all .5s ease;color:#fff;border-radius:5px 5px;padding:5px;}
.scale:hover{-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-o-transform:scale(1.5);}
2.rotate：水平旋转，属性值格式为Xdeg。(deg是“度”的意思)rotate(Xdeg)。X为正数时，顺时针旋转；为负数时，逆时针旋转
.rotate{100px;height:50px;background:#f00;-webkit-transition:all .5s ease;
color:#fff;border-radius:5px 5px;padding:5px;}
.rotate:hover{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);
-o-transform:rotate(10deg);}
3.translate：定位元素，基于XY轴重新定位元素。translate(Xpx,Ypx)。属性值为一个时，x、y轴参数相同；为两个时，x、y轴分别定位
.translate{100px;height:50px;background:#f00;-webkit-transition:all .5s ease;
color:#fff;border-radius:5px 5px;padding:5px;}
.translate:hover{-webkit-transform:translate(10px,-10px);-moz-transform:translate(10px,-10px);
-o-transform:translate(10px,-10px);}
4.skew：将元素沿水平方向倾斜变形。skew(Xdeg,Ydeg)。这个比较难表述，想象一下平行四边形吧。属性值为一个时，x、y轴参数相同；为两个时，x、y轴各自倾斜
.skew{100px;height:50px;background:#f00;-webkit-transition:all .5s ease;
color:#fff;border-radius:5px 5px;padding:5px;}
.skew:hover{-webkit-transform:skew(20deg,-10deg);-moz-transform:skew(20deg,-10deg);
-o-transform:skew(20deg,-10deg);}
5.matrix：矩阵，六个值。
.matrix{100px;height:50px;background:#f00;-webkit-transition:all .5s ease;
color:#fff;border-radius:5px 5px;padding:5px;}
.matrix:hover{-webkit-transform:matrix(1,-0.2,0,1,0,0);-moz-transform:matrix(1,-0.2,0,1,0,0);
-o-transform:matrix(1,-0.2,0,1,0,0);}
--------------------------------------------------------------
贝塞尔曲线
http://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A
-webkit-transition: -webkit-transform .5s cubic-bezier(.32,0,.15,1)
--------------------------------------------------------------