1, box-shado w: <length> <length> <length>? <length>? || <color>:
- 阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色
-webkit-box-shadow:5px 2px 6px #000;
-webkit /*Chrome/Safari*/ -moz /*Firefox*/ -ms /*IE*/ -o /*Opera*/
ul li a { text-decoration: none; color: #000 ; background: #ffc ; display: block; height: 350px; width: 200px; padding: 15px; /* Firefox */ -moz-box-shadow: 5px 5px 7px rgba(33,33,33,1) ; /* Safari+Chrome */ -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7) ; /* Opera */ box-shadow: 5px 5px 7px rgba(33,33,33,.7) ; }
ul li a{ -moz-transition:-moz-transform .15s linear; -o-transition:-o-transform .15s linear; -webkit-transition:-webkit-transform .15s linear; }
ul li:nth-child(even) a{ -o-transform:rotate(4deg); -webkit-transform:rotate(4deg); -moz-transform:rotate(4deg); position:relative; top:5px; background:#cfc ; }
ul li:nth-child(3n) a{ -o-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); position:relative; top:-5px; background:#ccf ; }
ul li:nth-child(5n) a{ -o-transform:rotate(5deg); -webkit-transform:rotate(5deg); -moz-transform:rotate(5deg); position:relative; top:-10px; } ul li a:hover,ul li a:focus{ -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7) ; -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7) ; -o-box-shadow:10px 10px 7px rgba(0,0,0,.7) ; -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25); position:relative; z-index:5; }
2,CSS3制作动画的几个属性:变形(transform)、转换即过渡(transition)和动画(animation)
transform——变形——主要包括:旋转rotate、扭曲skew、缩放scale、移动translate、矩阵变形matrix——详细介绍:http://www.w3cplus.com/content/css3-transform/
transform指变换,就那几个固定的属性:旋转啦,缩放啦,偏移啦什么的,与独立于远房亲戚transition使用,但是,效果就是很干涩机械的旋转移动。要是配合transition属性,旋转啊什么的,就会很平滑。
transition——使变化平滑。
transition-property :* //指定过渡的性质,比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过渡类型,有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
3,伪类选择器nth-child()
ul li:nth-child(3n+3) {
color: #ccc;
}
在无序列表里面选择是3倍数的列,n是大于0的值整数。 nth-child()圆括号里面支持两个关键词:even与odd。
4,margin padding:上右下左。
5,div居中显示:margin:0 auto;
6, em是相对单位,比如说一行文字使用12px大小的话,那么如果单独要定义其中几个文字使用2em的话, 它的显示效果为其他文字的2倍。
7,水平对齐 text-align
需要注意的是如果有padding这类的东西在,千万看清楚两边的padding值是否相同,当你看到文字不在中间的时候,可能就是因为两边的padding值不同。
垂直对齐
如果是一行文字,可以用line-height来控制,line-height的值和文字所在容器的高度一样。
垂直方向对齐有一个属性vertical-align,vertical-align:top;,vertical-align:middle;,vertical-align:bottom;,分别对应上对齐,中对齐,下对齐,但有时候会无效,不常用,本来垂直对齐就不常用。
最后就是用padding了,一般是padding-top。
8,$("td:eq(3)",$("tr")).hide();
jquery查询器, 在所有的 tr 中 代码: $("tr") ,查找第4个td 元素 代码: "td:eq(3)" 并将查找到的td隐藏。9,一个多个AJAX请求的情况下,如何利用jquery来处理几种case。
- 多个ajax请求同时发送,相互无依赖。--并列
- 多个ajax请求相互依赖,必须有先后顺序。--嵌套
- 多个请求被同时发送,只需要最后一个请求。