CSS3-animation,表格表单的格式化
animation
1、与transition一样,animation在IE9之前都不支持,不仅如此,还需要大量的供应商前缀
2、定义关键帧:@内容中需要大量的前缀
@keyframes fadeIn(animationName)
from{
}
50%{
}
to{
}
/*from起始关键帧,to结束关键帧,也可以用0%,100%分别表示起始与结束*/
oparity的值为0表示不可见,为1的时候表示完全可见
3、在元素中应用:
.b{
animation-name:fadeIn;
animation-duration:1s;---------设置动画从开始到结束所花的时间
}
同理,在样式用也都需要添加前缀
4、与transition一样,也有animation-timing-function,animation-delay
5、transition是只能运行一次的动画,而animation可以任意多次
Animation-iteration-count:10 -----表示进行多次,infinite表示无限次使用
6、animation-direction:alternate;动画第一次会淡出(从opacity等于1到0),第二次会重新淡入视图中(从opacity等于0到1)
7、animation-fill-mode:foeward;告诉浏览器该元素的格式要保持为动画结束时的样子,默认值是返回运行动画之前的初始状态
8、暂停animation,使用animation-play-state:running以及paused;但只有在伪类中才可以使用它,eg:.fade{animation-play-state:paused}
表格的格式化
1、caption 标签用来定义表格的标题,
<colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化,例如对表格单元列设置宽高
2、我们可以对表格的标题以及表格单元标签设置padding,但不能对<table>标签设置padding
3、table,tr,td{text-align:center}
4、vertical-align与text-align不同,它不会被继承,只能把它直接应用到<th>,<td>中,top,middle,bottom
5、如果对表格单元格设置border的时候,会在表格单元直接留下一条可见细缝,
border-spacing属性可用来控制该细缝,删除单元格之间显示的空格,将值设为0,即:
table{border-spacing:0}
即使消除了边框之间的那条缝隙,还是会出现双边框的现象,border-collapse:separate(表格默认值,会有单元间隔以及双边框),collapse(消除了单元间隔以及双边框)
如果border-collapse:collapse,则border-spacing将不起作用
6、border-radius属性可以对表格单元框进行添加圆角
如果将border-collapse属性设置为collapse,则浏览器将会忽略border-radius
7、在表格中,隔行进行样式设计,tr:nth-of-type(odd){} ; tr:nth-of-type(even){}
但IE8以及之前的版本都不支持:nth-of-type选择器
8、<colgroup>,<col>分别表示一组列以及个别的列,列的背景图片显示在表格单元的下方,如果给td以及th标签设置了背景色或者背景图片,那么列的背景就看不到了
<colgroup>
<col id="brand"></col>
<col id="price"></col>
<col id="power"></col>
</colgroup>
<tr>
<th scope="col">Brand</th>
<th scope="col">Price</th>
<th scope="col">Power</th>
</tr>
9、掩藏空白的单元格
table{empty-cells:hide;}
但是如果将border-collapse的属性值设为collapse,那么浏览器将会忽略empty-cells属性,依然显示出空白单元格的边框以及背景
表单的格式化
1、fieldset标签,在这显示背景的时候,IE会让背景溢出fieldset顶部的边线,同时padding会在fieldset边沿与其里面的内容之间添加空间,但IE会忽略top padding,不过我们可以使用top margin代替
2、legend标签是紧跟着fieldset标签之后,会垂直居中显示在fieldset的顶部边框上
3、伪类:focus创建一个选择器,改变访问者单击或者跳格进入表单时表单域展现的效果
伪类:checked主要是针对单选按钮和复选按钮
伪类:enabled以及:disabled