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

第二篇：项目实战篇任务3：“英博特智能科技”企业网站首页页面制作3.8案例展示3.8

案例展示（1）熟练掌握弹性布局。（2）掌握CSS3过渡效果的设置。（3）学会CSS3转换效果的设置。能力要求学习导览任务概述完成首页页面中产品展示模块的制作，在该模块中，上面是标题，下面是三个案例内容和更多超链接。3.8

案例展示任务思考（1）CSS3过渡效果对所有属性均可设置么？

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

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

3.8

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

3.8

案例展示CSS3转换CSS3转换（transform）功能可以实现元素的平移、旋转、缩放或倾斜。transform:none/*不应用任何变换*/transform:<transform-function>/*应用一个或多个<transform-function>值，以空格分开*/说明：<transform-function>是CSS的一种数据类型，用于对元素的显示做变换，包括二维变换和三维变换。基本语法：3.8

案例展示元素的平移translate方法实现元素的平移，语法如下：translate(tx,ty)/*二维*/①tx：要移动矢量的横坐标。②ty：要移动矢量的纵坐标。可以不写，默认为0。translate3d(tx,ty,tz)/*三维*/①tx：移动矢量的横坐标。②ty：移动矢量的纵坐标。③tz：移动矢量的z轴坐标。不能使用百分比，否则会被认为无效属性。★translateX(t)、translateY(t)、translateZ(t)分别是translate(tx,0)、translate(0,ty)、translate3d(0,0,tz)的简写形式。3.8

案例展示元素平移示例【示例代码】2-3-7.html。translate方法实现元素的平移3.8

案例展示元素的旋转rotate方法实现元素的旋转，语法如下：rotate(a)/*二维*/参数表示旋转的角度。正角表示顺时针旋转，负角表示逆时针旋转rotate3d(x,y,z,a)/*三维*/①x：旋转向量的x坐标。②y：旋转向量的y坐标。③z：旋转向量的z坐标。④a：旋转角度。正值表示顺时针，负值表示逆时针。★

rotateX(a)、rotateY(a)、rotateZ(a)分别是rotate3d(1,0,0,a),rotate3d(0,1,0,a),rotate3d(0,0,1,a)的简写。3.8

案例展示元素旋转示例【示例代码】2-3-8.html。rotate方法实现元素的旋转3.8

案例展示元素的缩放scale方法实现元素的缩放，语法如下：scale(sx)/*二维*/scale(sx,sy)/*二维*/①sx：缩放矢量的横坐标。②sy：缩放矢量的纵坐标。若不存在，则默认值与sx相同，即元素均匀缩放。scale3d(sx,sy,sz)/*三维*/参数sx、sy、sz分别表示在横轴、纵轴、z轴的缩放大小。3.8

案例展示元素缩放示例【示例代码】2-3-9.html。scale方法实现元素的缩放3.8

案例展示元素的倾斜skew方法实现元素的倾斜，语法如下：skew(ax)skew(ax,ay)参数ax、ay表示沿横、纵坐标扭曲元素的程度，是一个角度

★skewX(a)水平拉伸，将元素每个点在水平方向上扭曲一定程度。参数是一个角度，表示用于沿着横坐标扭曲元素的角度。★

skewY(a)垂直拉伸，将元素每个点在垂直方向上扭曲一定程度。参数是一个角度，表示用于沿着纵坐标扭曲元素的角度。3.8

案例展示元素倾斜示例【示例代码】2-3-10.html。skew方法实现元素的倾斜3.8

案例展示任务实施实现三列布局02.设置文本内容样式03.01.搭建案例展示模块结构具体要求见任务书设置CSS3转换效果04.3.8

案例展示讨论区运用所学知识