2-3-7 课件：“英博特智能科技”企业网站首页页面制作-产品展示

第二篇：项目实战篇任务3：“英博特智能科技”企业网站首页页面制作3.6 产品展示3.7：产品展示（1）熟练掌握弹性布局。（2）学会CSS3过
渡效果的设置。能力要求学习导览完成首页页面中产品展示模块的制作，在该模块中，上面是标题，下面是三个产品内容和更多超链接。3.7：产
品展示（1）CSS3过渡效果对所有属性均可设置么？
（2）鼠标移上对子元素设置样
式时hover与子元素之间的分隔符是？
（3）行内元素设置浮动需要清除浮动么？

3.7：产品展示CSS3是CSS（层叠样式表）技术的升级版本，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字
特效、多栏布局等模块。CSS3不仅有利于网站的开发与维护，还能提高网站的性能，增加网站的可访问性、可用性，使网站能适配更多的设备，
甚至还可以优化网站，提高网站的搜索排名结果。CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、元素的过渡效果、多
背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等等。 3.7：产品展示CSS3过渡（transitio
n）可以在限定的时间内从一个属性值平滑地过渡到另一个属性值。这种过渡效果可以在鼠标移上，鼠标单击，获得焦点或对元素任何改变中触发，
并平滑地以动画效果改变CSS的属性值。CSS3过渡效果可以应用于各种CSS属性，包括：背景颜色、宽度、高度、不透明度等。trans
ition属性类似于border，font这些属性，可以简写，也可以单独来写。简写时，各函数之间用空格隔开，且需要按一定的顺序排列
。transition:[ || || ransition-timing-function> || ]用空格隔开3.7：产品展示tra
nsition-property指定过渡的CSS属性，语法如下。transition-property:no | all | ingle-transition-property> [, ]（1）no：
没有指定任何样式。（2）all：默认值，表示指定元素所有支持transition-property属性的样式。（3） -transition-property>：指定一个或多个样式。注意：作用于多个过渡属性时，过渡属性中间用逗号隔开。不是所有样式都
能应用transition-property进行过渡，只有具有一个中点值的样式才能具备过渡效果，如颜色，长度，渐变等。3.7：产品
展示【示例代码】2-3-6.html。transition-property指定过渡的CSS属性3.7：产品展示transitio
n-duration指定完成过渡所需的时间，语法如下。transition-duration: [,] ime>为数值，单位为s（秒）或ms（毫秒），默认值是0。当有多个过渡属性时，可以设置多个过渡时间分别应用过渡属性，也可以设置一个
过渡时间应用所有过渡属性。3.7：产品展示【示例代码】2-3-6.html。transition-duration指定完成过渡所需
的时间。3.7：产品展示transition-timing-function指定过渡调速函数，语法如下。transition-ti
ming-function: [, ition-timing-function>]（1）ease：默认值，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢。（
2）linear：元素样式从初始状态过渡到终止状态速度是匀速。（3）ease-in：元素样式从初始状态过渡到终止状态时，速度越来越
快，呈一种加速状态。这种效果称为渐显效果。（4）ease-out：元素样式从初始状态过渡到终止状态时，速度越来越慢，呈一种减速状态
。这种效果称为渐隐效果。（5）ease-in-out：元素样式从初始状态到终止状态时，先加速再减速。这种效果称为渐显渐隐效果。3.
7：产品展示【示例代码】2-3-6.html。transition-timing-function指定过渡调速函数。3.7：产品展
示transition-delay用来指定一个动画开始执行的时间，即当改变元素属性值后多长时间开始执行过渡效果，它可以是正整数，负
整数和0（默认值是0），非零的时候必须将单位设置为s（秒）或ms（毫秒）。语法如下。transition-delay:
[, ]3.7：产品展示具体要求见任务书3.7：产品展示运用所学知识，完成英博特网站首页中”产品展示”模块的制作，截图上传讨论区。3.7：产品展示完成20个在线测试题。运用本课学习的技术，完成苏州音乐会演出信息的页面（详见能力拓展）。3.7：产品展示Web前端技术基础理想的书籍是智慧的钥匙。列夫·托尔斯泰