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

 

posted @ 2016-01-03 22:00  ^^-^^-  阅读(422)  评论(0编辑  收藏  举报