前端开发基础之

CSS3

CaelumTian@SIPC115

表格示例

• table-layout: fixed | auto;
• border-collapse: collapse | separate;
• display: table | row | cell;
• 表格只能应用padding属性

CSS3 高级选择器

• 兄弟选择器：
  • E ~ F 一般兄弟选择器
  • E + F 相邻兄弟选择器
• 结构伪类：
  • :first-child
  • :last-child
  • :nth-child     (孩子)
  • :nth-of-type (类型)

border-radius

• border-radius: 5px
• 可以指定四个方向
• 可以使用百分数(50% 10px/10px)

box-shadow

字体图标(@font-face)

• font-family：字体名称
• src: 字体连接

@font-face {
	font-family: sipc;
	src: url("../../fonts/icomoon.eot");
	src: url("../../fonts/icomoon.eot?#iefix") format("embedded-opentype"), 
	     url("../../fonts/icomoon.woff") format("woff"), 
	     url("../../fonts/icomoon.ttf") format("truetype"), 
	     url("../../fonts/icomoon.svg") format("svg");
}

transform

• 平移 (tanslate, translateX, tanslateY)
• 旋转 (rotate, rotateX, rotateY)
• 缩放 (scale, scaleX, scaleY)

tansition(过度)

• 从一个属性切换到另一个属性
• transition-property：规定属性名称（逗号分隔）
• transition-duration：过度需要的时间
• transition-timing-function：规定变化曲线
• transition-delay：规定过度延迟

• transition: property duration timing-function delay;

@keyframes

• animation: 合写属性
• animation-name：动画名称
• animation-duration：动画完成时间
• animation-timing-function：动画动作曲线
• animation-delay：规定动画何时开始
• animation-iteration-count：规定动画执行次数（infinite）
• animation-direction：规定动画执行方向
• animation-fill-mode : 属性规定动画在播放之前或之后，其动画效果是否可见 ( none | forwards 保持最后一个值 | backwards | both
  )

下节课

• javascript 数据类型
• javascript 基本语法
• javascript 对 dom 的操作