前端代码部分2幻灯片.ppt

涉及知识点 渐变 鼠标悬停 伪类 浏览器兼容 RGBA DAY 3 渐变 linear-gradient(top, #00a2ff, #ffea00) linear-gradient(top, #00a2ff, #ffea00) 方向 颜色1 颜色2 √√ RGBA DAY 3 鼠标悬停 hover 透明遮罩 点击小图出现大图 点击菜单下滑 √√ RGBA DAY 3 悬停 第二组 div { RGBA DAY 3 鼠标悬停 悬停效果：过渡 div {transition: width 2s;} div:hover{width:300px;} 属性 时长 div { RGBA DAY 3 鼠标悬停 悬停效果：过渡 transition: width 1s linear 2s; div:hover{width:300px;} 属性 时长 时间曲线 延时 div { RGBA DAY 3 鼠标悬停 悬停效果：过渡 linear 规定以相同速度开始至结束的过渡效果 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果）。 ease-in 规定以慢速开始的过渡效果 ease-out 规定以慢速结束的过渡效果 ease-in-out 规定以慢速开始和结束的过渡效果 cubic-bezier(n,n,n,n) √√ RGBA DAY 3 效果 visibility: hidden display: none VS visibility 属性规定元素是否可见,但始终占据空间 √√ RGBA DAY 3 伪 :first-child :first-of-type :lang伪类 :last-child :nth-child(3) :nth-last-child(1) :nth-of-type(n) :nth-last-of-type(2) :only-child :only-of-type √√ RGBA DAY 3 伪 :first-line :first-letter 与CSS结合：p.article:first-letter :before :after √√ RGBA DAY 3 IE条件 注释 !--[if !IE]除IE外都可识别![endif]-- !--[if IE] 所有的IE可识别 ![endif]-- !--[if IE 5.0] 只有IE5.0可以识别 ![endif]-- !--[if IE 5] 仅IE5.0与IE5.5可以识别 ![endif]-- !--[if IE 6] 仅IE6可识别 ![endif]-- !--[if lt IE 6] IE6以下版本可识别 ![endif]-- !--[if gte IE 6] IE6以及IE6以上版本可识别 ![endif]-- !--[if IE 7] 仅IE7可识别 ![endif]-- !--[if lt IE 7] IIE7以下版本可识别 ![endif]-- !--[if gte IE 7] IE7以及IE7以上版本可识别 ![endif]-- !--[if lte IE 9] IE9以及IE9以上版本可识别 ![endif]-- √√ RGBA DAY 3 效果 visibility: hidden display: none VS visibility 属性规定元素是否可见,但始终占据空间 √√ RGBA DAY 3 sub sup 价格变化 xsub1/sub+ysub2/subsup3/sup=15