网站设计与网页制作立体化项目教程（第4版） 课件 2-3-7 课件：“英博特智能科技”企业网站首页页面制作-产品展示

第二篇：项目实战篇任务3：“英博特智能科技”企业网站首页页面制作3.6产品展示3.7：产品展示（1）熟练掌握弹性布局。（2）学会CSS3过渡效果的设置。能力要求学习导览任务概述完成首页页面中产品展示模块的制作，在该模块中，上面是标题，下面是三个产品内容和更多超链接。3.7：产品展示任务思考（1）CSS3过渡效果对所有属性均可设置么？

（2）鼠标移上对子元素设置样式时hover与子元素之间的分隔符是？

（3）行内元素设置浮动需要清除浮动么？

3.7：产品展示认识CSS3CSS3是CSS（层叠样式表）技术的升级版本，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。CSS3不仅有利于网站的开发与维护，还能提高网站的性能，增加网站的可访问性、可用性，使网站能适配更多的设备，甚至还可以优化网站，提高网站的搜索排名结果。CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、元素的过渡效果、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等等。

3.7：产品展示CSS3过渡CSS3过渡（transition）可以在限定的时间内从一个属性值平滑地过渡到另一个属性值。这种过渡效果可以在鼠标移上，鼠标单击，获得焦点或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。CSS3过渡效果可以应用于各种CSS属性，包括：背景颜色、宽度、高度、不透明度等。transition属性类似于border，font这些属性，可以简写，也可以单独来写。简写时，各函数之间用空格隔开，且需要按一定的顺序排列。transition:[<transition-property>||<transition-duration>||<transition-timing-function>||<transition-delay>]用空格隔开3.7：产品展示transition-propertytransition-property指定过渡的CSS属性，语法如下。transition-property:no|all|<single-transition-property>[,<single-transition-property>]（1）no：没有指定任何样式。（2）all：默认值，表示指定元素所有支持transition-property属性的样式。（3）<single-transition-property>：指定一个或多个样式。注意：作用于多个过渡属性时，过渡属性中间用逗号隔开。不是所有样式都能应用transition-property进行过渡，只有具有一个中点值的样式才能具备过渡效果，如颜色，长度，渐变等。3.7：产品展示transition-property示例【示例代码】2-3-6.html。transition-property指定过渡的CSS属性3.7：产品展示transition-durationtransition-duration指定完成过渡所需的时间，语法如下。transition-duration:<time>[,<time>]<time>为数值，单位为s（秒）或ms（毫秒），默认值是0。当有多个过渡属性时，可以设置多个过渡时间分别应用过渡属性，也可以设置一个过渡时间应用所有过渡属性。3.7：产品展示transition-duration示例【示例代码】2-3-6.html。transition-duration指定完成过渡所需的时间。3.7：产品展示transition-timing-functiontransition-timing-function指定过渡调速函数，语法如下。transition-timing-function:<single-transition-timing-function>[,<single-transition-timing-function>]（1）ease：默认值，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢。（2）linear：元素样式从初始状态过渡到终止状态速度是匀速。（3）ease-in：元素样式从初始状态过渡到终止状态时，速度越来越快，呈一种加速状态。这种效果称为渐显效果。（4）ease-out：元素样式从初始状态过渡到终止状态时，速度越来越慢，呈一种减速状态。这种效果称为渐隐效果。（5）ease-in-out：元素样式从初始状态到终止状态时，先加速再减速。这种效果称为渐显渐隐效果。3.7：产品展示transition-timing-function示例【示例代码】2-3-6.html。transition-timing-function指定过渡调速函数。3.7：产品展示transition-delaytransition-delay用来指定一个动画开始执行的时间，即当改变元素属性值后多长时间开始执行过渡效果，它可以是正整数，负整数和0（默认值是0），非零的时候必须将单位设置为s（秒）或ms（毫秒）。语法如下。transition-delay:<time>[,<time>]3.7：产品展示任务实施实现三列布局02.设置文本内容样式03.01.搭建产品展示模块结构具体要求见任务书设置CSS3过渡效果04.3.7：产品展示讨论区运用所学知识，