《网页设计与制作项目教程》-任务12首页其他板块的设计与制作

任务12

首页其他板块的设计与制作任务本任务需要完成“学习党的二十大精神专题网”首页的其他板块,包括学习资料、学习光影、学习研讨、学习动态、页脚几个板块。其中学习资料板块使用的是浮动布局，学习光影、学习研讨、学习动态板块使用弹性布局，页脚使用最基本标准流布局。这些都是网站开发的基本技能。

学习光影板块使用了变形、过渡、动画这三种特效使页面更加炫酷，鼠标移到图片上，图片会缓慢变大,鼠标离开图片时，图片会缩回原来的大小。

通过本任务的学习，将利用前面所学到的各种网页制作技术,完成整个首页的制作。网页效果如所示：任务12首页其他板块的设计与制作任务任务12首页其他板块的设计与制作首页其他板块效果任务12首页其他板块的设计与制作知识目标技能目标素质目标（1）掌握flex弹性布局的各种属性及使用方法。（2）熟悉网格模型。（3）掌握CSS变形、过渡、动画的用法。（1）能够使用flex技术布局页面。（2）能够根据网页的实际需要灵活运用各种布局技术。（3）能利用CSS实现页面中的常用动态效果。（1）掌握并遵循Web开发标准，培养严谨的工作作风。（2）培养良好的自主学习和思考习惯。（3）加强实践教育，提升实践能力。弹性布局利用CSS实现动态效果任务实现任务12首页其他板块的设计与制作1.弹性布局1.1弹性布局的基本概念1.2弹性布局的使用1.3弹性布局的属性任务12首页其他板块的设计与制作1.1弹性布局的基本概念

网页常见的布局方案是基于盒模型，依赖display属性+position属性+float属性。它对于那些特殊布局不方便，比如垂直居中就不容易实现。

弹性布局，又称为flex布局，是CSS的一种新的布局模式，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

1.弹性布局1.1弹性布局的基本概念

1.弹性布局引入弹性盒模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性布局有以下两个重要的概念：

1.容器和项目

容器：需要添加弹性布局的父元素。

项目：弹性布局容器中的每个子元素，称为项目。

2.主轴和交叉轴

主轴：在弹性布局中，通过属性规定水平或垂直方向为主轴。交叉轴：与主轴垂直的另外一方向，称之为交叉轴。1.2弹性布局的使用

1.弹性布局弹性布局使用比较简单，但是依然有一些注意事项。在使用时需要注意以下两点：

（1）给容器添加display：flex/inline-flex属性，就可使容器内中的项目采用弹性布局显示，不遵循常规标准文档流的显示方式。而容器本身在文档流中的定位方式依然遵循常规标准文档流的显示方式。

（2）将容器设为弹性布局后，项目的float、clear和vertical-align属性将失效，但position属性依然生效。

1.3弹性布局的属性

1.弹性布局弹性布局有12大属性，按照作用范围的不同，可以分为容器属性和项目属性两类。1.容器属性（1）flex-direction属性flex-direction属性定义容器要在哪个方向上堆叠项目，它用来定义主轴，可以取4个值，具体含义如表所示：1.3弹性布局的属性

1.弹性布局flex-direction属性定义主轴属性值描述row默认值。设置横向从左到右排列（左对齐）。水平方向为主轴，垂直方向为交叉轴，弹性项目从左到右水平方向顺序排列。主轴的起始线是弹性容器的左边，终止线是弹性容器的右边。row-reverse反转横向排列（右对齐），从后往前排列，最后一项排在最前面。水平方向为主轴，垂直方向为交叉轴，弹性项目从右到左水平方向逆序排列。主轴的起始线是弹性容器的右边，终止线是弹性容器的左边。column纵向排列。垂直方向为主轴，水平方向为交叉轴，弹性项目从上到下垂直方向顺序排列。主轴的起始线是弹性容器的上边，终止线是弹性容器的下边。column-reverse

反转纵向排列，从后往前排，最后一项排在最上面。垂直方向为主轴，水平方向为交叉轴，弹性项目从下到上垂直方向逆序排列。主轴的起始线是弹性容器的下边，终止线是弹性容器的上边。1.3弹性布局的属性

1.弹性布局（2）flex-wrap属性flex-wrap属性用于指定弹性容器的项目换行方式。常用属性值及含义如表所示：表flex-wrap属性值及其含义属性值描述nowrap默认值，弹性容器为单行。该情况下弹性项目可能会溢出容器wrap弹性容器为多行。该情况下弹性项目溢出的部分会被放置到新行，项目、内部会发生断行。wrap-reverse反转wrap排列。1.3弹性布局的属性

1.弹性布局（3）flex-flow属性flex-flow是复合属性，是flex-direction和flex-wrap的缩写形式。（4）justify-content属性justify-content属性定义了弹性项目在主轴方向的对齐方式，属性值及含义如表所示：justify-content属性值及含义属性值描述flex-start弹性项目紧靠主轴起点。flex-end弹性项目紧靠主轴终点center弹性项目向主轴中点对齐space-between第一个弹性项目靠起点，最后一个弹性项目靠终点，余下弹性项目平均分配间隔空间，弹性项目会平均地分布在主轴里space-around每个弹性项目两侧的间隔相等。所以，弹性项目之间的间隔比弹性项目与弹性盒子的边距的间隔大一倍space-evenly元素间距离平均分配1.3弹性布局的属性

1.弹性布局（5）align-items属性align-items属性用于设置弹性项目在交叉轴方向上的排列，属性值及含义如表所示：align-items属性值及其含义属性值描述flex-start弹性项目紧靠交叉轴的起点对齐，即弹性项目的侧轴（纵轴）起始位置的边界紧靠该行的侧轴起始边界。flex-end弹性项目紧靠交叉轴的终点对齐，即弹性项目的侧轴（纵轴）起始位置的边界紧靠该行的侧轴结束边界。center弹性项目向交叉轴的中点对齐，即弹性项目在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。stretch默认值，如果弹性项目未设置高度或设为auto，弹性项目将被拉伸占满整个容器的高度，但同时会遵照“min/max-width/height”属性的限制。1.3弹性布局的属性

1.弹性布局（6）align-content属性align-content属性定义了多根主轴线的对齐方式。如果项目只有一根主轴线，该属性不起作用。属性值及含义如表所示：align-content属性的属性值属性值描述stretch默认值，将项目拉伸以占据剩余空间。flex-start项目在容器的起点排列。flex-end项目在容器的终点排列。center项目在容器内居中排布。space-between多行项目均匀分布在容器中，其中第一行分布在容器的起点，最后一行分布在容器的重点。space-around多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等1.3弹性布局的属性

1.弹性布局2.项目属性（1）order属性

order属性用于控制弹性项目的排列顺序，默认为0，数值越小，排列越靠前，可以负数或整数。

（2）flew-grow属性flew-grow属性用来设置项目相对于其他项目的增长量。flew-grow属性默认为0，如果存在剩余空间不够，也不增长。（3）flew-shrink属性flew-shrink属性与flex-grow属性相反，用来设置项目相对于其他项目的收缩量，默认值为1。（4）flex-basis属性flex-basis属性属性规定弹性项目占据的主轴空间。如果主轴为水平，设置这个属性相当于设置项目的宽度，原width属性将会失效。1.3弹性布局的属性

1.弹性布局

（5）flex属性flex属性是flex-grow、flex-shrink和flex-basis三个属性的简写。默认值为0，1，auto。后两个属性是可选。

（6）align-self属性align-self属性用控制单个弹性项目在交叉轴上排列方式，而align-items属性用于控制弹性容器中所有弹性项目的排列。如果设置了项目的align-self属性，将会覆盖容器的align-items属性。2.利用CSS实现动态效果任务12首页其他板块的设计与制作2.1transition过渡2.2

transform变形2.3animation动画2.1transition过渡在CSS中，可以使用transition属性（过渡属性）给元素添加从一种样式转变到另一个样式的过渡动画效果。也就是通过transition属性，可以设置属性值在一定的时间区间内平滑地过渡另一个属性值的过渡动画。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变属性值。要实现这种过渡动画效果，必须规定以下两项内容：（1）指定要添加效果的CSS属性；（2）指定效果的持续时间。2.利用CSS实现动态效果2.1transition过渡2.利用CSS实现动态效果实现过渡效果的属性及含义如下表所示：过渡属性transition属性值描述transition-property规定应用过渡的CSS属性的名称transition-timing-function定义过渡效果花费的时间，默认是0transition-timing-function规定过渡效果的时间曲线，默认是"ease"transition-delay规定过渡效果何时开始，默认是0transition简写属性，用于在一个属性中设置四个过渡属性2.1transition过渡2.利用CSS实现动态效果（1）transition-property属性transition-property属性用来定义哪些属性需要进行平滑过渡动画。语法格式如下：其中，none表示没有属性会获得过渡效果；all：默认值，所有属性都将获得过渡效果；property表示定义应用过渡效果的CSS属性名称，多个属性名之间以逗号分隔，例如：transition-property:background-color,width;（2）transition-duration属性transition-duration属性用来定义过渡效果所花费的时间，默认值为0，常用单位是秒(s)或者毫秒(ms)。语法格式如下：

属性值数值的数值为0时，没有过渡动画。transition-property:none｜all｜property;transition-duration:数值s/ms;2.1transition过渡2.利用CSS实现动态效果（3）transition-timing-function属性transition-timing-function属性规定过渡效果的速度曲线，可以根据时间的推进去改变属性值的变换速率，有6个变换速率值，属性值及含义如表所示。属性值描述linear指定以相同速度（匀速）开始至结束的过渡效果ease默认值，指定以慢速开始，然后变快，最后慢慢结束的过渡效果ease-in指定以慢速开始，然后逐渐加快的过渡效果ease-out指定以慢速结束的过渡效果ease-in-out指定以慢速开始和结束的过渡效果cubic-bezier(n,n,n,n)定义用于加速或者减速的贝塞尔曲线的形状，它们的值是0~1transition-timing-function属性值2.1transition过渡2.利用CSS实现动态效果（4）transition-delay属性transition-delay属性用来定义过渡动画的延迟触发的时间，默认值为0，属性值数值的常用单位是秒（s）或者毫秒（ms）。语法格式如下：

transition-delay的属性值可以为正整数、负整数和0。当设置为负数时，过渡动作会从该时间点开始，之前的动作被截断；设置为正数时，过渡动作会被延迟触发。（5）transition属性transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delayg共4个过渡属性。语法格式如下：transition-delay:数值s/ms;transition:transition-propertytransition-durationtransition-timing-functiontransition-delay;2.1transition过渡2.利用CSS实现动态效果在使用transition属性设置过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。无论是单个属性还是简写属性，使用时都可以实现多个过渡效果。例如：

等价于

也等价于下面的代码段：

使用transition属性在设置过渡动画效果时，可以添加多个样式的变换效果，添加的属性由逗号分隔。例如以下代码：

设置了宽度和高度两个属性上的过渡动画效果。transition:width2s;transition:width2sease0s;transition-property:width;193transition-duration:2s;transition-timing-function:ease;transition-delay:0s;transition:width2s,height2s;2.2transform变形

在CSS中，可以利用transform属性来实现元素的旋转、缩放、倾斜、移动等变形处理。变形处理由变形函数来完成，变形函数用来操控元素发生旋转、缩放、倾斜、移动等变化。transform属性的语法格式如下：其属性值的含义见表所示。2.利用CSS实现动态效果transform:none│transform-function;transform属性值及其含义属性值描述none默认值，表示不进行变形transform-function用于设置变形函数，可以是一个或多个变形函数列表2.2transform变形

2.利用CSS实现动态效果

1.2D变形2D变形是指某个元素围绕其x轴和y轴进行变形。常用2D变形函数如表所示。常用2D变形函数变形类型2D变形函数描述旋转元素rotate(angel)参数angel是度数值，代表旋转角度缩放元素scale(x,y)改变元素的高度和宽度。x,y的值代表缩放比例，取值包括正数、负数和小数scaleX(x)改变元素的宽度scaleY(y)改变元素的高度倾斜元素skew(x-angel,y-angel)参数angel是度数值，代表倾斜角度skewX(angel)沿着x轴倾斜元素skewY(angel)沿着y轴倾斜元素移动元素translate(x,y)基于x和y坐标重新定位元素translatex(x)沿着x轴移动元素，即左右方向translateY(y)沿着y轴移动元素，即上下方向2.2transform变形

2.3D变形3D变形是指某个元素围绕其x轴、y轴、z轴进行变形。常用3D变形函数见表所示。2.利用CSS实现动态效果变形类型3D变形函数描述3D旋转Rotate3d(x,y,z,angel)前三个参数用于判断需要旋转的坐标轴，旋转轴的值设置为1，否则为0，参数angel代表旋转角度RotateX(angel)沿着x轴3D旋转RotateY(angel)沿着y轴3D旋转RotateZ(angel)沿着z轴3D旋转3D缩放元素Scale3d(x,y,z)参数x,y,z是缩放比例，取值包括正数、负数和小数scaleX(x)沿着x轴缩放scaleY(y)沿着y轴缩放scaleZ(z)沿着z轴缩放常用3D变形函数2.2transform变形2.利用CSS实现动态效果变形类型3D变形函数描述倾斜元素skew(x-angel,y-angel)参数angel是度数值，代表倾斜角度skewX(angel)沿着x轴倾斜元素skewY(angel)沿着y轴倾斜元素移动元素Translate3d(x,y,z)(x,y,z)基于x、y和z轴坐标重新定位元素translatex(x)沿着x轴移动元素，即左右方向translateY(y)沿着y轴移动元素，即上下方向translateY(z)沿着z轴移动元素3D透视图Perspective(n)参数n是透视深度的数值2.2transform变形2.利用CSS实现动态效果3.元素变形基准点

变形默认都是以元素的中心点为基准点进行的，如果需要改变这个基准点，可以使用transform-origin属性，语法格式如下：

xyz分别是x轴、y轴和z轴的偏移量，偏移量的取值可以是具体数据、百分比，也可以是方向位置名词。偏移量的属性值含义见表所示。transform-origin:xyz;transform-origin属性值（偏移量）偏移量取值描述X轴偏移量指定以方向位置名词有：left、center、right；具体数值，如：20px百分比：如10%y轴偏移量方向位置名词有：top、center、bottom；具体数值，如：20px百分比：如10%z轴偏移量具体数值，如：20px2.3animation动画2.利用CSS实现动态效果动画是使元素从一种样式逐渐变化为另一种样式的效果。CSS中主要是运用@keyframes关键帧和animation相关属性来实现。@keyframes用来定义动画，animation将定义好的动画绑定到特定元素，并定义动画时长、重复次数等相关属性。

1.@keyframes定义动画关键帧状态

@keyframes属性用来定义动画关键帧的状态，其语法格式如下：

其中，animationname定义动画的名称，其值是一个自定义标识符，例如:colorchange。keyframes-selector是关键帧选择器，值是通常是一个百分比，指定当前关键帧在整个动画过程中的位置，0%表示动画的开始，100%表示动画的结束。还可以使用from或者to表示，from表示动画的开始，相当于0%，to表示动画的结束相当于100%。CSS-styles表示执行到当前关键帧时对应的动画状态，其值是一个样式表。每个关键帧表示动画过程中的一个状态，动画有多个关键帧。@keyframesanimationname{keyframes-selector{CSS-styles;}}2.3animation动画2.利用CSS实现动态效果

2.动画的调用当在@keyframes中创建动画时，需把它捆绊到某个选择器，否则不会产生动画效果。CSS通过animation属性调用动画，animation相关的属性如表所示。偏移量取值描述animation-name规定@keyframes动画的名称animation-duration规定动画完成一个周期所花费的秒或毫秒，默认是0animation-timing-function规定动画的速度曲线，默认是"ease"animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式animation-delay规定动画何时开始，默认是0animation-iteration-count规定动画被播放的次数，默认是1animation-direction"normal"规定动画是否在下一周期逆向播放，默认是animation-play-state规定动画是否正在运行或暂停，默认是"running"animation所有动画属性的简写属性animation属性2.3animation动画2.利用CSS实现动态效果

（1）animation-name属性animation-name属性用于定义要应用的动画名称，为@keyframes动画规定名称。语法格式如下:animation-name:keyframename|none;其中，Keyframename用于规定需要绑定到选择器的@keyframes定义的动画名称，如果值为none，则表示不应用任何动画，通常用于覆盖或者取消动画。

（2）animation-duration属性anmnon-duraton属性用于定义整个动画效果完成所需要的时间，语法格式加下:animation-duration:数值;数值是以秒(s)或者毫秒(ms)为单位的时长，默认值为0，表示没有任何动画效果。当值为负数时，则被视为0。2.3animation动画2.利用CSS实现动态效果（3）animation-timing-function属性animation-timing-function用来规定动画的速度曲线，定义使用哪种方式来执行动画效果。语法格式如下:animation-timing-function:属性值;属性值及含义如表所示。属性值速度曲线描述linear动画从头到尾的速度是相同的ease默认值，动画以速度开始，然后加快，在结束前变慢ease-in动画以低速度开始ease-out动画以低速度结束ease-in-out动画以低速度开始和结束animation-timing-function属性值及其含义2.3animation动画2.利用CSS实现动态效果

（4）animation-fill-mode属性animation-fill-mode属性用来设置动画播放时间之外的效果，即动画开始或动画结束时的状态。语法格式如下：animation-fill-mode:none|backwards|forwards|both;属性值及含义如表所示。属性值描述none默认开始保持原来的样式，结束保持原来的样式backwards开始前处于第一帧的样式，结束默认保持原来的样式forwards开始前默认保持原来的样式，结束保持最后一帧的样式both开始保持第一帧，结束保持最后一帧的样式animation-fill-mode属性值及其含义2.3animation动画2.利用CSS实现动态效果

（4）animation-fill-mode属性animation-fill-mode属性用来设置动画播放时间之外的效果，即动画开始或动画结束时的状态。语法格式如下：animation-fill-mode:none|backwards|forwards|both;属性值及含义如表所示。属性值描述none默认开始保持原来的样式，结束保持原来的样式backwards开始前处于第一帧的样式，结束默认保持原来的样式forwards开始前默认保持原来的样式，结束保持最后一帧的样式both开始保持第一帧，结束保持最后一帧的样式animation-fill-mode属性值及其含义2.3animation动画2.利用CSS实现动态效果（5）animation-delay属性animation-delay属性用于定义动画什么时候开始。其基本语法格式如下:取值